Vue基础

一、响应式数据原理

object.defineProperty(对象，属性，{

        value:" ",

        是否循环,

        是否可以更改,

        set( ){ },只要监听的属性值改变就触发，在这个函数里面更新视图

        get（）{  return 值 }，get函数里边返回数据 同步属性的数据 

})

二、vue.js

一个渐进式的mvvm前端框架

可以与其它框架兼容

mvc

mvp  == 代理

mvvm === 全自动

M - 数据模型 -- data（接口返回的数据）

V - 视图模型 -- 挂载元素里面的（就i是组件）

VM - 视图数据  -- 逻辑层

三、虚拟DOM和diff算法

 angular vue react.js 

之前开发都是直接更改dom

更改前
let objArr = [{
    type:"div",
    props:{id:"abc"},
    children:['123']
},
{
type:"ul",
props:{},
children:[
    {
    type:"li",
    props:{},
    children:[1]
    },
        {
    type:"li",
    props:{},
    children:[2]
    },
        {
    type:"li",
    props:{},
    children:[3]
    }
]
}]
//更改后
let objArr = [{
    type:"div",
    props:{id:"abc"},
    children:['123']
},
{
type:"ul",
props:{},
children:[
    {
    type:"li",
    props:{},
    children:[1]
    },
        {
    type:"li",
    props:{},
    children:[2]
    },
        {
    type:"li",
    props:{},
    children:[4]   xxx
    }
]
}]

四 、key

key字符串和数字

 key是给虚拟DOM元素加唯一标示的，如果涉及到增删不建议使用下标作为key值，建议使用id作为key值，当虚拟dom发生改变的时候可以快速的定位改变前和改变后的同一个元素，方便对比，
key值改变了会重新创建 -- 缓存了需要重新更新