vue原理

2020-03-14 本文已影响0人吾名刘斩仙

Vue原理

未经允许禁止转载

MVVM 数据驱动视图

传统组件只是静态渲染，更新还要依赖于操作DOM

vue MVVM，数据驱动视图

react setState，数据驱动视图

MVVM：Modev-View-ViewModel

1. Model:可以理解为vue里的data对象

2. View:页面，DOM

3. ViewModel:Vue层，处理一些DOM监听、指令操作等

MVVM就是通过vue监听、指令操作等方法修改data进而渲染页面

Vue响应式

vue3.0之前

核心API：Object.defineProperty

Object.defineProperty基本用法：

var data = {}
var name = 'zhangsan'
Object.defineProperty(data,'name',{
    get:function(){
        console.log('get')
        return name
    },
    set:function(newVal){
        console.log('set')
        name = newVal
    }
})
console.log(data.name)  //get zhangsan
data.name = 'liu'       //set
console.log(data.name)  //get liu

功能稍完整的Object.defineProperty:

//定义data
const data = {
    name: 'zhangsan',
    age: 14,
    city:{      //需要深度监听
        id: 010,
        name: '北京'
    }
}
//监听函数
function observer(target) {
    //判断传入对象参数是否为object
    if (typeof target !== 'object' || target == null) {
        return target
    }
    //对传入对象进行for in遍历
    for (let key in target) {
        //target--对象;key--对象属性;target[key]--属性值
        defineProperty(target, key, target[key])
    }
}

//obj.defineProperty
function defineProperty(target, key, value) {
    //深度监听
    observer(value)

    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newVal) {
            if (newVal !== value) {
                //深度监听
                observer(value)

                value = newVal
                update()
            }
        }
    })
}

//update
function update() {
    console.log('update')
}
observer(data)
data.name = 'liu'
data.age = 15

Object.defineProperty的缺点：

1. 深度监听需要递归到底，一次性计算量大。

2. 无法监听新增/删除属性。(需要用Vue.set/Vue.delete)

虚拟DOM和diff算法

1. vdom是实现vue和react的重要基石

2. diff算法是vdom中最核心、最关键的部分

用JS模拟DOM结构

<!-- DOM -->
<div class='container' id='div1'>
   <p>vdom</p>
   <ul style='font-size: 14px;'>
       <li>a</li>
   </ul>
</div>



//用JS模拟DOM
{
   tag: 'div',
   props:{
       id: 'div1',
       className: 'container'
   },
   children: [
       {
           tag: 'p',
           children: 'vdom'
       },
       {
           tag: 'ul',
           props: {
               style: 'font-size: 14px'
           },
           children: [
               {
                   tag: 'li',
                   children: 'a'
               }
           ]
       }
   ]
}

vue、react的vdom参考了snabbdom

//snabbdom:
var container = document.getElementById('container')
var vnode = h(...)    snabbdom通过h方法模拟出DOM结构赋值给vnode
patch(container,vnode)  //把vnode结构赋值给container

snabbdom重点：1、h函数；2、vnode数据结构；3、patch函数

vdom总结：

1. 用JS模拟DOM结构(vnode)

2. 新旧vnode进行对比，得出最小的更新范围，最后更新DOM

3. 数据驱动视图的模式下，有效控制DOM操作

diff算法

树diff的时间复杂度O(n的3次方)

遍历tree1
遍历tree2
排序

1000个节点要计算1亿次

优化时间复杂度到O(n)

只比较同一层级，不跨级比较
tag不相同，则直接删除重建，不再深度比较
tag和key，两者都相同，则认为是相同节点，不再深度比较

1000个节点只需计算1000次

snabbdom源码解读

1. h函数

h函数一般接受3个参数:sel(元素标签)、data(元素属性)、children(子内容)。也可单独接受其中一两个参数。

h函数返回执行一个vnode函数，参数包括sel,data,children,text(如果children为字符串，则用text显示该字符串),undefined

2. vnode函数

返回一个对象，包含sel、data、children、text、elm(该DOM节点)、key

3. patch函数

接受的第一个参数为element||vnode，第二个参数为vnode。
执行pre hook生命周期。
判断第一个参数是否为vnode，不是的话(传入的第一个参数为一个DOM)则创建一个空vnode关联到这个DOM元素。

4. sameVnode函数

执行sameVnode判断两个vnode的key和ele是否都相等，相等的话则执行patchVnode函数，不相同则删除销毁旧的vnode，然后用新的vnode重建。

5. patchVnode函数

执行prepatch hook生命周期钩子。
设置新vnode的ele，把旧vnode的ele赋给新的。
判断新旧children

6. addVnodes函数

有旧的children，没有新的，则添加vnode

7. removeVnodes函数

没有旧的children，有新的，则移除vnode

8. updateVnode函数

对比children，如开始和开始作对比，如果相同，则执行patchVnode函数，执行后index会进行累加或者累减，直到对比完成。

如果几种对比方式(start-start,end-end,start-end,end-start)都未命中，则用key和sel进行对比，如果都相等则执行patchVnode函数。

从这里可以看出v-for使用key的重要性，不使用key的话无法做对比，直接销毁旧的创建新的，另外key如果是随机数或者index则也无法对比。所以key是有必要写的且不能乱写

diff算法总结

1. patchVnode

2. addVnodes removeVnodes

3. updateChildren(key的重要性，可回答v-for为什么要有key：因为vdom的diff算法会对比select节点和key是否相同，相同则继续深入对比，不相同则重建，所以key是必要的)

vdom和diff算法总结

vdom核心概念很重要:h、vnode、patch、diff、key等。

vdom存在价值更重要:数据驱动视图，控制DOM操作。

模板编译

with语法

const obj = {
   a: 1,
   b: 2
}
console.log(obg.a)
console.log(obg.b)
console.log(obg.c)  //undefined


//使用with语法，打破了作用域规则，能改变{}内自由变量的查找方式
//将自由变量当做obj的属性来查找
with(obj){
   console.log(a)  //1
   console.log(b)  //2
   console.log(c)  //报错
}

1.模板不是html，因为包含一些指令、插值，直接放在浏览器里是不能执行的

2.html是标记性语言，只有js才能实现判断循环

3.因此，模板一定是转换成js代码，即模板编译

模板编译流程

模板编译为rander函数，执行rander函数返回vnode
基于vnode再执行patch和diff
使用webpack vue-loader，会在开发环境下编译模板

使用rander代替template

Vue.component('component',{
    rander: function(createElement){    
        return createElment(    //vnode
            'h'+this.level,
            [
                createElement('a',{
                    attrs:{
                        name: 'headerId',
                        href: '#'+'headerId'
                    }
                },'this is a tag')
            ]
        )
    }
})

模板编译总结

with语法
模板到rander函数，再到vnode，再到渲染和更新
vue组件可以使用rander替代template

组件渲染/更新过程

涉及vue原理三大知识点:

1.响应式:监听data属性 getter setter

2.模板编译: 模板到rander函数再到vnode

3.vdom: patch(elm,vnode)和patch(vnode,newVnode)

1. 初次渲染过程

1.解析模板为rander函数(在webpack的vue-loader、vue-cli环境下已完成)

2.触发响应式，监听data属性getter setter

3.执行rander函数生成vnode，执行patch(elem,vnode)

2. 更新过程

1.修改data，触发setter(此前在getter已经被监听)

2.重新执行rander函数生成newVnode，执行patch(vnode,newVnode)

3. 异步渲染

vue是异步渲染，修改data一次性提交，能提高性能

$nextTick相关