学习Vue3 第一章

1.介绍Vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架, Vue的核心库只 关注视图层，

MVVM：model数据层+view视图层+viewModel数据/视图监听层

（1）数据驱动视图的渲染：监听数据的更新，让视图重新渲染

（2）视图驱动数据的更改：监听页面表单元素内容的改变，自动去修改相关的数据

2.Vue2和Vue3的对比

2.1 Vue2采用的是Options API，Vue3采用的是Composition API，可以看下图

Options API

Composition API

2.2 重写了双向绑定

vue2基于Object.defineProperty()来实现的

   let data = {
       a: 1,
   }
   
   let vue = {}
   
   for (let key in data) {
     Object.defineProperty(vue, key, {
       get() {
         console.log('获取了')
         return data[key]
       },
       set(value) {
         console.log('设置了')
         data[key] = value
       },
      })
    }
    console.log(vue.a) // 获取会触发get
    vue.a = 2 // 设置会触发set
    // 后设置的是没有被劫持的，所以不会触发set
    // vue2这里对于数组是重写了数组的方法，对于对象可以用this.$set, this.$delete
  
    console.log(vue)

vue3是基于Proxy来实现的

     let data = {
        a: 1,
      }
      let vue = new Proxy(data, {
        get(target, key) {
          console.log('获取了')
          return target[key]
        },
        set(target, key, value) {
          console.log('设置了')
          target[key] = value
        },
      })
      // console.log(vue.a)
      // vue.a = 2

      vue.b = 2 // 会触发set
      console.log(vue, 'vue')