vue的底层逻辑:先通过object.definiteproperty拦截,每次修改setter方法拦截到了,通知watcher,把所有的代码块和组件进行更新,在更新的时候他们会先创建新的虚拟dom再与老的虚拟dom进行比对,然后两个节点以最小的代价(key关键字)找出不同来,在更新到真实的dom中。
数据更新检测会拦截的方法有:
push(),pop(),shift(),unshift(),splice,sort(),reverse()。
新数组代替旧数组不会拦截有:
fliter(),concat(),slice(),map()
vue常用方法
v-show:显示隐藏
v-if:创建/删除
v-for:列表渲染
vue使用的是mvvm模式,特点是低耦合,关联性小,复用率高。
vue2的缺点有:
无法监听es6的set,map变化。
无法监听class类型的数据。
属性的新加或删除也无法监听。
vue2的使用方式:
var vm = new Vue({
el:"#box",
data:{
mytext:"",
datalist:["aaa","add","bbb","bbc","ccc","ddd","eee","ade"]
},
methods:{
handleInput(){
console.log("input",this.mytext)
//es5 filter
}
}
})
vue3的使用方式:
var vm = Vue.createApp({
data(){
return{
datalist:["1111","2222","3333"],
obj:{
name:"kerwin",
age:100,
location:"dalian"
}
}
}
}).mount("#box")