vue3.0 性能提升，基本语法，简单deom

一、diff 算法、静态标记

vue2.0 在进行diff算法的时候会对每一层、每一个元素、进行对比，造成性能浪费。
vue3.0 会在动态绑定的地方加上一个标记例如动态class和styel {{}} 等、会直接对标记的进行对比

标记内容

二、静态提升 hoistStatic

静态提升就是，在进行dom树render的时候会对元素进行createNode把元素进行创建

vue2.0X 的时候对把每一个都进行createNode
vue3.0 在重复渲染的时候，只会对带有标记动态的内容进行创建，并不是没有个都要createNode

会进行全局的一个常量赋值，直接复用。

三、事件侦听器缓存 cacheHandlers

vue3.0 会对dom进行标记，事件也是属于动态的，所以在进行diff算法的时候会进行比较。
但是事件侦听器会进行一个事件缓存，在diff的时候不会进行造成不必要的比较

所以不需要比较，性能自然就提升了

vue中的setup注意点&&执行时机

setup会在我们的beforeCreate和create中间执行的，所以这个时候data和methos还没有生成所以有几个注意点

1、 在setup生命周期里面我们访问this是undefined
2、 因为this是undefined所以我们访问不到data和methos

vue3.0双向绑定原理

vue2.0中的双向绑定原理是通过对data中的数据结合object.defineproperty对数据进行添加getter和setter方法通过setter进行数据更新和使用getter通知每一个订阅者进行数据更新

vue3.0是使用proxy进行代理实现的数据双向绑定具体原理等待研究

vue3.0 ref其实是reactive的语法糖

1、 ref 和 reactive 的区别

ref 是用来创建基本数据类型的
reactive是创建复杂数据类型的例如arr、object、json等数据（需注意：如果我们声明的是一个时间戳的对象，视图没进行更新，我们要对他重新赋值，就可以了，相当于在磁盘中的内存释放，从新进行赋值）

原理

使用ref进行创建属性其实还是会自动转换加上一个value的属性，在temeplate中不需要进行.value因为ref属性有一个_v_isref:ture的属性用来区分的，如果是true会进行转换reactive

setup使用方法

在Vue3.0 里面我们的逻辑大多数是在setup中进行处理的，我们可以把一下方法单独抽成一个文件，相互传参，更加模块化了

  setup(props,{emit，root,。。。}) {
    //第一个参数是props 数据
    //第二个是一下自带的数据方法
    return {}
  }

更多参数参考官网 点我

自定义ref

我们可以通过customRef实现一个自定义ref

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      },
    }
  })
}

接收一个回调函数，回调函数接收两个参数，track、trigger，
返回一个对象，需要get和set，需要加上track，告诉Vue这个是需要追踪的，trigger是说需要更新视图的

更多组合api请参考官网 点我

下面是我的一个简单的V3 demo
可以看下点我