Vue中的响应式布局_vue响应式布局

一、响应式：

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:"子组件"
                    }
                },
            }
        }
     })