VUE 笔试题随笔-01

vue的8个⽣命周期函数？

1. beforeCreated

2. created

3. beforeMount

4. mounted

5. beforeUpdate

6. updated

7. beforeDestory

8. destoryed

v-show 与 v-if的区别？

1、v-show: 是否显示，元素肯定已经渲染在dom节点上，然后通过样式来控制是否显示。

2、v-if: 是否渲染，如果没有额外的样式控制，只要渲染就是显示的。v-if有⽐较⼤的渲染开销（符合条件要渲染到dom节点中，不符合条件要从dom节点中去掉元素）。当频繁执⾏条件时，不适合使⽤v-if，⽤v-show；反之执⾏条件的次数很少，使⽤v-if即可

v-for与v-if优先级？

v-for优先，对循环的每⼀项来执⾏v-if，根据v-if条件执⾏的结果再决定输出内容

v-for中的key的作⽤？

key的作⽤是标示⼀组兄弟节点中每⼀项的唯⼀性，在下次更新时进⾏⼆次元素⽐对，去定位元素是更新、删除、新增、移动等

vue中每个周期函数⼀般放置什么业务逻辑？

1、在组件加载时就需要发送的异步请求，可以放在beforeCreated或者created上

2、如果从路由获取⼀些数据来使⽤，可以放在created

3、如果要操作dom，放在mounted, 因为这个阶段是把前⾯创建的组件实例的dom结构 挂载 到了dom节点中

4、如果需要在组件更新后，需要发送数据给后台或者前台⾃⼰的⼀些存储，放在updated

5、如果需要在组件销毁时处理⼀些数据、定时器等，放在beforeDestoryed

vue中data为什么是function？

    因为vue中内部使⽤的组件没有使⽤new Vue这种实例化的形式，不是创建⼀个新的实例，所以data数据需要进⾏区分，函数每次执⾏之间没有任何关系，所以使⽤函数来返回data数据，这样每次使⽤这个组件，组件的数据都只是这次的，下次再使⽤，下次数据跟这次的数据没有关系就不会相互影响了

vue中双向绑定的原理？

借助js中 Object.defineProperty(obj, 'a', {set: fn, get: fn}) 定义数据时可以对这个数据进⾏修饰，修饰的属性有：

1、value： 这个属性的值

2、writeable: 是否可写

3、configurable: 是否可配置

4、enumable: 是否可遍历

5、set: 设置数据

6、get: 获取数据

上面的6种装饰属性分为2组使用，第一组：1234；第二组：3456

Object.defineProperty(obj, 'a', {
    set: function(n) {
        a = n
        document.getElementById('root').innerHTML = '<div>hello world</div>'
        document.getElementById('abc').innerHTML = n
    },
    get: function() {
    // 依赖分析和收集
        return a
    }
})

obj.a = 2 // this.abc = 123

console.log(a) // var b = obj.a

双向：
1. 视图view => 数据model：通过事件绑定的形式把数据从视图层传递到逻辑层

2. 数据model => 视图view：通过拦截setter getter来重新定义其中的逻辑，然后在模板解析阶段收集其中使⽤的数据（依赖收集），后续数据发⽣变化，会执⾏set⽅法的逻辑，set⽅法其中会根据上次依赖收集的结果去更新 使⽤当前变化的数据的那个template

keep-alive的作⽤和被keep-alive声明的组件的⽣命周期？

	keep-alive作⽤是保持组件不销毁，⽤来处理要保持组件状态的那些场景；被keep-alive声明的组件不被销毁，⼀直存在，多两个⽣命周期，actived 激活和deatvied 不激活状态

vue组件间传值有哪些⽅式？

1、⽗⼦传值: props

2、⼦⽗传值: 回调

3、兄弟节点传值:  $on 与$emit ，在触发事件时可以传递参数，参数会被监听事件的处理函数接收到

computed和watch的区别？

1、computed是⼀个计算属性，对⼀些基于data数据产⽣的数据进⾏计算，或者⻚⾯要使⽤的数据是⽐较复杂的，每次在模板中运算1是逻辑和结构混淆代码不分离不清晰2是每次都执⾏耗费性能，所以计算属性另⼀个特征是他能把计算结果缓存下来，下次的计算因⼦如果没有变化，那么直接返回上次缓存的值供组件使⽤

2、watch是监听数据的变化，执⾏⾃⼰的业务逻辑

3、共同点：都会监听他们使⽤的数据是否变化，但是作⽤倾向不同，watch也可以做computed做的事情，还可以去做其他事情：⽐如发送⽹络请求，存储本地数据、改变⻚⾯的ui结构、添加定时操作、跳转路由

vue中改变数组内索引的值，数据不更新，如何处理？

- vue对数据进⾏劫持，当数据变化时去更新⻚⾯上⽤到该数据的地⽅
- 数组的劫持⽐较例外，它只对数组本身进⾏劫持，并没有对数组中每⼀个元素进⾏劫
持，所以根据索引改变某项的值，不会触发setter，所以⻚⾯就得不到更新了。
- 解决⽅法：就是让vue知道数据变化了，使⽤splice⽅法改变数组或者this.$set或者
Vue.set来定义
data: function() {
    return {
        list: [1, 21, 3],
        a: 1,
        b: 'abc',
        c: {aa: 11, bb: 22, cc: 33}
    }
}
methods: {
    handler: function() {
        this.$set(this.list, 2, 33)
        // Vue.set(this.list, 2, 35)
        // this.list.splice(2, 1, 355)
    }
}

vue中传参的⽅式？

1、使⽤中转
    1、全局中转 window

    2、如果是在组件内部中转，把数据寄存在this实例对象上

    3、vuex也是⼀个中转⽅案，所有的组件都可以从这⾥拿数据和改变数据，vuex会制定⼀系列的规范和操作约束，让数据管理更加的灵活、⽅便操作

    4. 本地存储，如果是需要⻓期存在的数据，使⽤localStorage；临时的数据使⽤sessionStorage

2、使用vue-router 进行传参
	2-1、使用query查询词

        // 在某些操作函数（⽐如点击某个元素）执⾏跳转
    this.$router.push({
        path: 'list',
        query: {
            phone: '15192407777',
        }
    })

    // query参数就是url后⾯跟上?及后⾯的内容 => /list?phone=15192407777
    // 在list⻚⾯获取参数的值：this.$route.query

    2-2、使⽤params路径
        1、注意路径是由多部分组成的，所以要使⽤path的话，必须把path拼接完整（例外的情况：可变部分是可有可⽆的）
        this.$router.push({
            // 如果可变部分的是可以没有的，那么就不需要添加了
            path: 'info/' + 后⾯定义的可变部分的参数值,
        })

        // 在info⻚⾯获取参数: this.$route.params
        // 错误演示： 如果想使⽤params传参，不要使⽤path，会导致params⽆效
        this.$router.push({
            path: 'info',
            params: {
                id: 11
            }
         })

        // 正确演示： 使⽤name和params配合使⽤
        this.$router.push({
            name: 'info',
            params: {
                id: 11
        
            }
        })