Vue3.0学习

一. 学习Vue3.0推荐博文

1. 官网地址

2. 二.主要讲些什么

3. Vue3.0的数据响应式原理，对比2.0好在哪里
4. composition-api对比2.x(options api)好在哪里
5. Vue3.0生命周期介绍
6. composition-api中常用的api介绍与使用
7. 说的多不是做一个，使用Vue3.0语法实现一个页面

   三. composition-api对比2.x class 好在哪里

四. Vue3.0的数据响应式原理，对比2.0好在哪里

1. 众所周知，Vue2.x双向绑定通过Object.defineproperty重定义data中的属性的get和set方法，从而劫持了data的get和set操作。

   <input type="text" class="test">
   <script>
     var txt = document.querySelector('.test')
     var person = {
       name: ''
     }
     txt.oninput = function() {
       person.name = this.value
       console.log(person.name)
     }
     Object.defineProperty(person, 'name', {
       get: function() { //当要执行person.name时触发get方法
         console.log('调用了get方法');
         //这里需要一个返回值,不然console.log(person.name)就会是undefined
         return txt.value //返回input的内容
       },
       set: function(newValue) { //当person.name发生改变时触发
         console.log('调用了set方法');
         //将改变的值赋给input
         txt.value = newValue
       }
     })

Vue2.x双向绑定存在的弊端有：

1. 实例创建后添加的属性监听不到，因为数据劫持是在实例初始化过程中执行，具体是在beforeCreate和created生命周期间完成。

2. defineproperty ()无法监听数组变化，当直接用index设置数组项是不会被检测到的。如：this.showData[1] = {a:1}。
   可以通过$set来解决后期添加监听属性的问题。

3. vue3.0双向绑定
   Vue3.0采用Proxy和Reflect实现双向绑定，
   它在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，
   因此提供了一种机制，可以对外界的访问进行过滤和改写。我们可以这样认为，Proxy是Object.defineProperty的全方位加强版。
   Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。Object.defineProperty不能做的Proxy还能做。
   Proxy作为新标准，得到了各大浏览器厂商的大力支持，性能持续优化。唯一的不足就是兼容性的问题，而且无法通过polyfill解决。

   <input type="text" class="test">
   <script>
     var txt = document.querySelector('.test')
     var person = {
       name: '',
       aaaa:''
     }
     txt.oninput = function() {
       person.name = this.value
       console.log(person.name,'oninput')
     }
     person= new Proxy(txt, {
                 // 当前对象 属性 值
             get: (target, prop, value) => {
               console.log(target, prop, value,'get方法');
               return value
             },
             set: (target, prop, value) => {
               console.log(target, prop, value,'set方法');
               target.value = value
             }
           })
   </script>