vue响应式数据原理

vue在初始化数据时候，data属性使用object.definePrototype重新定义所有的属性，当页面取到对应的属性，会进行依赖的收集，数据变化，watcher会检测到数据变化通知观察者，最终触发视图变化

image.png

数组更改数据方法

vue将data中的数组，进行原型链重写。指向了自己定义的数组原型方法，通过依赖更新对对应的数据。

image.png

vue异步渲染

性能考虑，vue是组件级更新，相同组件的watcher是一样的。

image.png

nextTick原理

nextTick使用了宏任务和微任务，定义一个异步方法，多次调用nextTick将方法存在队列中，通过这个异步方法全清空当前队列，nextTick就是这个异步方法

image.png

computed特点

computed也是一个watcher是具备缓存的，只要当依赖的属性发生变化才会更新视图

image.png

computed和methods区别

    
{{message}}
    
{{methodTest()}}
    
{{methodTest()}}
    
{{methodTest()}}
    
{{computedTest}}
    
{{computedTest}}



let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            console.log("methods")
            return this.message + 'methods'
        }
    },
    computed: {
        computedTest() {
            console.log("computed")
            return this.message + 'computed'
        }
    }
})
/// computedTest中的结果只打印1次，methodTest打印3次

ajax请求放的位置

一般放在mounted中，这样可以保证统一，同时能够操作DOM

什么时候使用beforeDestory

定时器的清除、scroll以及move事件解绑

vue模板编译原理

1.将模板转化成ast，抽象语法树。虚拟dom-------用对象描述一个DOM元素，用对象描述js语法。
2.优化树
3.ast生成代码

template-------ast树----codegen------render函数----------虚拟dom

vue中v-if和v-show的区别

v-if条件不成立不会渲染当前指令所在节点的dom元素
v-show只是切换当前dom的现实和隐藏

image.png

image.png

v-if和v-for不能连用

v-for的优先级高于v-if，如果连用每一个元素都会添加上v-if，造成性能问题。

image.png

vue中diff算法

同级比较，在比较子节点
先判断一方有儿子一方没有儿子
比较都有儿子的情况
递归比较子节点