1、Vue常见的指令有哪些，有什么用

（1）v-model ：双向数据绑定，绑定的是表单控件

（2）v-for ：循环遍历：

                     遍历数组，参数(item,index) in list

                     遍历对象，参数(value,key,index) in list

                     遍历数字，num in 10 (1~10)

             ：key对每一次的数据进行记录，提高重排效率，

                key的要求：key只能是字符串或者数字且必须是唯一的

（3）v-show ：显示内容 :频繁切换的时候可以使用v-show

（4）v-hide ：隐藏内容

（5）v-if ：显示与隐藏 ：只修改一次的时候可以使用v-if，删除dom元素

（6）v-else-if ：必须和 v-if 连用

（7）v-else ：必须和 v-if 连用 不能单独使用

（8）v-bind ：属性绑定，简写：‘：+属性名’；作用： 及时对页面的数据进行更改

（9）v-on：事件绑定，v-on：click=‘事件名称’，缩写：@click=‘事件名称’，

（10）v-text ：可以替换或覆盖标签中的内容或节点，不能解析富文本，保持原样输出，

                        显示节点、标签等内容

（11）v-html ：可以替换或覆盖标签中的内容或节点，可以解析富文本---即将里面的内容呈现出来

（12）v-cloak：在vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，

                          利用这个特性可以实现：界面防止闪烁

（12）v-bind:class 三种绑定方法：

             ①对象型 ：<div :class="{'orange':true,'box':true}">直接对象</div>

             ②三木表达式：<div :class="flag?'orange':'fs30'">三木表达式</div>

             ③数组 ：['box','orange']

（13）v-once： 进入页面时 只渲染一次 不在进行渲染

（14）v-pre ：把标签内部的元素原位输出

2、双向数据绑定的原理

Vue2：通过数据劫持结合发布者订阅者模式的方式来实现的，通过Object.defineProperty() 来

           劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应 的监听回

           调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变 化，视图变化，

           数据也随之发生改变。

           Object.defineProperty()方法有三个参数：  obj：属性的对象。
                                                                               prop：要定义或修改的属性。
                                                                               descriptor：一个对象，包括get和set方法。

Vue3：通过Proxy(代理)的方式实现 拦截对data任意属性的操作, 包括属性值的读写,添加删除等；

           通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

3、路由的跳转和传参有哪几种方式

（1）跳转

 ①声明式：

②函数式

（2）传参

①声明式

 ②函数式

4、组件间的通讯方式有哪些

（1）父传子：

        子组件：子组件通过props接收数据

                         

         父组件：父组件在引用子组件的标签里利用自定义属性传值

                        

（2）子传父：

        父组件：在父组件中自定义事件接收数据

 

         子组件：子组件通过$emit传递数据    

（3）vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，

                    管理应用中所有组件的状态。
                    获取到全局状态：this.$store.state.变量名

（4）缓存：localStorage和sessionStorage

                    localStorage：存储的数据会一直在浏览器本地存储，除非手动清除

                                         只能存储字符串，任何格式的数据在存储的时候都会被自动转为

                                        字符串，所以读取的时候，需要进行类型的转换。

                   sessionStorage：存储的数据在浏览器关闭后就会清除。

                   保存数据：localStorage.setItem(key,value)

                   读取数据：localStorage.getItem(key)

                   删除单个数据：localStorage.removeItem(key)

                   删除所有数据：localStorage.clear()

（5）ref / $refs：ref：这个属性用在子组件上，它的用用就指向了子组件的实例，

                                   可以 通过实例来访问组件的数据和方法

         子组件：

export default {
  data () {
    return {
      name: 'JavaScript'
    }
  },
  methods: {
    sayHello () {
      console.log('hello')
    }
  }
}

        父组件：

<template>
  <child ref="child"></component-a>
</template>
<script>
  import child from './child.vue'
  export default {
    components: { child },
    mounted () {
      console.log(this.$refs.child.name);  // JavaScript
      this.$refs.child.sayHello();  // hello
    }
  }
</script>

（6）事件总线：事件总线多用于兄弟组件的通信

                           uni.o n(eventName,callback)监听事件

                           uni.emit(eventName,OBJECT)来触发全局的自定事件

                           uni.$off([eventName, callback])移出监听

5、谈一谈对路由守卫的理解

（1）什么是路由守卫：  路由守卫是路由在跳转前、后过程中的一些钩子函数。在     实现路由跳转前校验是否有权限，有权限就可以通过，反之就会被 执行其他操作。

（2）路由守卫分为三种：全局路由、组件内路由，路由独享。

（3）路由守卫参数：to：目标路由对象

                                   from：即将要离开的路由对象

                                   next()：放行

全局路由：所有的路由切换都会执行，一般写在路由配置文件中，

                  钩子函数有：beforeEach、beforeResolve、afterEach（参数中没有next）

router.beforeEach((to, from, next) => {
 console.log(to) => // 到哪个页面去？
 console.log(from) => // 从哪个页面来？ 
next() => // 一个回调函数
 } 
router.afterEach（to，from） = {}

组件内路由：钩子函数有：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
 beforeRouteEnter (to, from, next) { 
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
 next(vm => {})
 }
 beforeRouteUpdate (to, from, next) { 
// 同一页面，刷新不同数据时调用， 
} 
beforeRouteLeave (to, from, next) { // 离开当前路由页面时调用 }

路由独享：一般写在路由配置中，钩子函数有：beforeEnter

export default new VueRouter({
 routes: [ 
    { 
      path: '/',
 	  name: 'home', 
      component: 'Home',
      beforeEnter: (to, from, next) => { // ... }
     } 
   ]
 })

6、谈一谈对Vuex的理解

（1）什么是vuex: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储，管理应用中所有组件的状态，并以相应的规则保证 状态以一种可预测的方式发生变化。

（2）为什么使用vuex,解决什么问题：

        进行统一的状态管理，解决不同组件共享数据的问题。

        不同视图需要变更同一状态的问题。

        使用vuex之后，状态变化更加清晰。

（3）vuex有5大核心模块：

        state：存放全局初始值

        getters：对数据进行加工。函数形式

        mutations：对数据进行修改。在组件中，用this.$store.commit(‘名 字’，’参数’)

                          进行mutations中的调用函数  mutations 中的函数必须同步执行

        actions：异步操作，但是还是要在mutations中进行修改  在组件 中，

                        用this.$store.dispatch(content, ‘参数’) 进行调用 actions中的函数，

                        其中content为上下文状态，是一个对象， 可以获取到state和getters中的东西

        modules：模块化

  （4）解决vuex状态刷新重置问题：①将状态存入缓存，但是数据的时效性难以保障

                                                          ②在请求接口之后确定状态

7、谈一谈对混入的理解

（1）混入 (mixin) ： 是一种分发Vue组件中可复用功能的非常灵活的一种方式。

                                混入对 象（mixins）是一个js对象，它可以包含组件中script项中的任 意功

                                能选项，当组件使用混入对象时，所有混入对象的选项将被混 入该组件本

                                身的选项。

（2）混入的作用：可以省很多代码(高类聚低耦合)，还方便维护；

（3）混入的方式：

①单页面引入混入：首先创建一个 mixin 文件夹，然后再在里面创建一个  mixin.js文件，

                                 然后再创建混入对象：

let mixin = {
    data(){
        return{
            str:'你好'
        }
    },
    created() {
        console.log("我是混入的生命周期函数")
    },
    methods: {
        showToast(){
            alert("我是混入中的方法啊!")
        }
    },
}
// 记住，最后一定要导出
export default mixin 

        最后在组件中使用混入：

import mixin from '../mixin/mixin.js'	// 首先引入这个混入对象
export default {
    mixins:[mixin],		// 然后注册你引入的这个混入对象
}

 ②全局混入：创建混入对象的方式还是和上面方法一样，这里就直接引入了;

                       在main.js中引入混入对象并全局注册

import mixin from './mixin/mixin'
Vue.mixin(mixin);

（4）注意事项：

①对于混入对象以及组件自身的created钩子函数，它们都将被调用。但混入对象的钩子会在组件自身的钩子之前调用。

②如果组件自身定义了与钩子对象中同名的数据或方法，为了避免冲突，vue将优先使用组件自身的数据或方法

8、谈一谈对插槽的理解

插槽有两种：默认插槽和具名插槽

                     默认插槽：<slot></slot>

                    具名插槽： <template v-slot:header>免费</template>

                                      <template v-slot:footer>底部</template>

                                      <h2><slot name=“header”>课程</slot></h2>

9、什么是跨域，如何解决

（1）什么是跨域：是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的， 是浏览器对JavaScript实施的安全限制。浏览器从一个域名的网页去请 求另一个域名的资源时，出现域名、端口、协议任一不同，都属于跨域。

（2）解决跨域：后台直接不做限制，放开所有请求。优点：方便    缺点：不安全

                          JSONP：原理：利用script标签不受同源策略，需要后端配合

                          配置代理（目前90%都在用）：在vue.config.js中进行配置代理（可以配置多个）