一、响应式:
model变化,导致view变;view变,导致model变。
只有在data中定义的变量才具有响应式。
二、v-for的更新检测
数组哪些方法可以触发自动更新?
7个改变原数组的方法 push、pop、unshift、shift、sort、reverse、splice
数组哪些方法不可以触发自动更新? slice,join,concat, indexOf
解决方案(更新): 覆盖data中的数组
通过数组的下标更改数组的元素?
数组是变化,没有触发setter方法,没有进一步触发watcher方法更新dom
vue中提供了 this.$forceUpdate() 强制更新页面
三、v-for的就地更新检测
当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。
如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,
而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。
`v-for` 的默认行为会尝试原地修改元素而不是重新创建
没有带key, 按照元素比对,默认使用的是v-for的就地复用
带key,key的值是index, 按照key的值index来比对,默认使用的是v-for的就地复用
带key,key的值是id, 按照id的值来比对,直接将创建好的元素插入到指定为止
带key,提高for循环的执行效率
key值的选择,如果有id使用id,如果没有id使用index
四、diff算法
diff算法: 在内存中进行比对虚拟dom
1. 同级比较
2. 先比较根元素,根元素改变,删除重建
3. 根元素没有变化,属性变化了, 复用标签,打补丁更新属性
五、虚拟dom
虚拟dom:
1. 存在内存中
2. 对象形式
3. 保存着dom的关键信息
六、过滤器filter
过滤器:处理一些数据
// <div id="app">
// <!-- {{timeChuo | 过滤器名}} -->
// {{timeChuo | timeFilter}} <br>
// {{msg | reverseMsg }} <br>
// {{msg | reverseMsg | add$}} //一个数据可以添加多个过滤器
// </div>
const vm = new Vue({
el: '#app',
data: {
timeChuo:1678851265350,
msg:"hello world"
},
filters: { // 过滤器
timeFilter:function(val){ // 处理的元素(|之前的数据)
var date = new Date(val); // 将时间戳转为日期对象,
return date.toLocaleString();//再将日期对象转为字符串
},
reverseMsg:function(val){ // val是默认的,是你处理的元素,x是reverseMsg的参数
return val.split("").reverse().join("")
},
add$:function(val){
return val +"!"
}
}
})
Vue3中弃用了过滤器
七、认识组件
全局注册组件: 注册组件的名字可以是驼峰法(MyHeader,myHeader),
使用组件的时候如果是在body中使用必须短横线,如果在template中写的可以使用驼峰法(短横线命名法 my-header )
app.component("组件的名字",{ // 配置里面有
template:``,
data(){
return {}
},
methods:{},
computed:{},
watch:{},
})
vue2中注册组件时,必须只能出现一个根组件
template:'<div> 所有的内容 </div>',
vue3中注册组件时,可以没有根组件
template:'<div></div> <div> </div><div> </div>',
局部注册组件
let app = Vue.createApp({
data () {
return {
}
},
components: { // 局部组件的注册
// 组件的名字:对象形式的配置项
'my-header':{
template:`<div>{{msg}}</div>`,
data() {
return {
msg:"子组件"
}
},
}
}
})