vue学习经验总结（1）

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")

标签：vue,dom,datalist,更新,学习,拦截,监听,经验总结
来源： https://blog.csdn.net/weixin_44046541/article/details/123140368