复习vue重点
数据代理原理解析(简单的例子)
<script>
//数据代理原理
let obj={x:90}
let obj2={y:0}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x=value
}
})
</script>
key的原理
<!--
虚拟DOM算法
旧虚拟DOM与新虚拟DOM对比 找到相同的key
用index作为key:对数据进行:逆序添加 删除等破坏顺序操作:会产生没有必要的DOM更新 效果没问题 效率低
如果有输入性DOM则会产生错误 界面有问题
建议使用唯一标识作为key 学号 id 等
-->
<body>
<div class="root1">
<ul>
<li v-for="(p,index) in persons" :key="p.id">{{p.name}}
<input type="text">
</li>
<button @click="add">点我向前添加一个成员信息</button>
</ul>
</div>
</body>
<script>new Vue({
el:'.root1',
data:{
persons:[
{ id:'001',name:'张三'},
{ id:'002',name:'李四'},
{ id:'003',name:'王五'}
]
},
methods:{
add(){
const p ={id:'004',name:'老刘'}
this.persons.unshift(p)//往前加 push在后加
}
}
})
</script>
监测数据改变原理
1.传入data
2.加工data
3.vm._data=data
属性值一变 调用seter 重新解析模板 生成新的虚拟DOM 进行算法对比 更新页面
1.vue会监视data中所有层次的数据
2.如何监测对象中的数据:
通过setter实现 并且要在new vue时就传入监测数据
(1)后追加的属性 vue不做响应式的处理
(2)如需要响应式 使用以下API:
Vue.set(target propertyName value) 或者 vm.$set()
3.监测数组中的数据
(1)调用原生对应的数组的方法
(2)重新解析模板 更新页面
4.修改数组元素方法
除了一些特定的API 还可以使用vue.set()
5.vue.set不能给vm和vm的根数据对象vm._data添加属性
组件注意点(以school为例)
1.school组件本身是一个VueComponent的构造函数 是Vue.extend生成的
2.写 <school/>标签 会解析创建school组件的实例对象
3.每次调用Vue.extend 返回的是全新的VueComponent
4.组件配置中 this指向是VueComponent实例对象(简称vc) new vue指向是vue实例对象(简称vm)
生命周期
beforeCreat:无法访问data数据和methods方法
初始化:数据代理 数据监测
created:可以访问data methods
vue开始解析 生成虚拟dom(内存中) 页面不显示解析好的内容
beforeMount:页面是未经vue解析的
将内存中的DOM转为真实的
mounted:页面是vue编译好的DOM
beforeUpdate:数据是新的 页面是旧的 数据页面不同步
beforeDestroy:清除定时器 解绑自定义事件 原生DOM还可以操作 可以访问数据 调用方法
但是对数据的修改不会触发更新
通过复习看之前的视频,发现还是有新的收获,对之前忽略的问题有了新的认识和理解,不仅是一边复习,还是一次学习新知识理解更深刻的机会,将一些重点的知识和案例再进行消化。