Vue3 探究

体验vue3的三种姿势：

• vue-cli
• 官方的webpack-preview
• vite

详细步骤：
vue-cli:

npm install -g @vue/cli
vue create 01-vue3-cli
cd 01-vue3-cli
vue add vue-next
npm run serve

webpack-preview:

git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd 01-vue3-webpack
npm install 
npm run dev

vite:

npm install -g create-vite-app
create-vite-app 01-vue3-vite
cd 01-vue3-vite
npm install
npm run dev

关于 Vite

大致的原理是拦截import发出的http请求，返回浏览器的代码，也保留了import语法，让浏览器自己去处理依赖 script type module 支持import；

让浏览器处理es6 import的活，好处就是当前页面引用多少，编译多少，项目越大优势越大。

关于 proxy 与 vdom重写

vue2初始化 所有的数据都要走defineProperty ；

vue3用proxy 动态的决定返回什么 做了拦截，初始工作量减少 组件实例化的提升还是明显。

动态静态模板 vue2一竿子到底 全部diff，而vue3在模板层做静态分析。生成聪明的渲染函数。

静态提升，节点结构根据v-if和v-for切分出block，block内部节点结构石不变的，我们直接把动态节点维护在一个数组里即可。

一个大模板 可能嵌套了十层，但是没有v-if或者v-for的话，整个模板只需要记录一个数组，包含动态节点，就是这样。

vue2也有static标记优化，但是做的不极致，vue3设计了block的概念，update只和动态内容强相关，和静态内容解耦了，大部分项目静态节点比你想象的多，比如一些为了布局存在的div等。

关于 Composition API

• reactive
• watchEffect
• ref

其实Vue2现在就有一个全局的方法，方法叫做Vue.observable。这个其实就是跟Vue3的这个reactive，是一样的：

it('should observe basic properties', () => {
   let dummy
   const counter = reactive({ num: 0 })
   effect(() => (dummy = counter.num))

   expect(dummy).toBe(0)
   counter.num = 7
   expect(dummy).toBe(7)
 })

eactive负责对象等负责数据，ref负责基本数据变成响应式 比如数字和字符串，effect负责副作用，这三个概念就是响应式的核心，而且ref和reactive还有一点点小区别。

reactive直接遍历对象+Proxy， ref其实也可以用reactive实现，不过ref只用到了valute属性，所以完全可以使用get和set来实现依赖收集和通知，有更好的性能。

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  let value = shallow ? rawValue : convert(rawValue)
  const r = {
    __v_isRef: true,
    get value() {
      track(r, TrackOpTypes.GET, 'value')
      return value
    },
    set value(newVal) {
      if (hasChanged(toRaw(newVal), rawValue)) {
        rawValue = newVal
        value = shallow ? newVal : convert(newVal)
        trigger(
          r,
          TriggerOpTypes.SET,
          'value',
          __DEV__ ? { newValue: newVal } : void 0
        )
      }
    }
  }
  return r
}

整个 Componsition API，体现的是一种逻辑抽象能力。是 reactive、watchEffect、ref 的组合。

主要就是可以把生命周期，响应式数据，操作函数，全部抽离再一个内部函数，所以vue3的组件就可以无限的拆分，并且数据来源还可以异常清晰。

所以可以用 Componsition API 替代 mixin。
（mixin 的缺点：1.当嵌套了很多层后，不是是从哪层 mixin 来的；2. mixin 的类型推到不清晰）

---

相关参考:
Vue Composition API