vue3 学习

---

1 compiler 优化

• 1
  1）对于一些静态标签 node 不在做处理 (hoistStatic --> ssr优化)
  2）静态绑定的class， id 不再做更新处理
  3）动态的node 会打包 一个标记 ( patchFlag ), 进行更新分析 ( 动态绑定 )

实例：

静态node不做更新处理

QQ截图20210407143300.png

QQ截图20210407143510.png

把静态 动态数据区分处理，可以提升性能

• 2
  1）事件监听器 Cache 缓存处理 ( cacheHandlers )
  
  cacheHandlers 未开启
  
  
  cacheHandlers 开启后
  
  优点：如果是页面要 复用 一个组件的话，组件中注册的事件不用 多次创建这个函数代码块( 不会多次实例化重复函数，提升浏览器性能)

2）hoistStatic 自动针对多静态节点进行优化，直接输出字符串

ssr 优化

把静态 动态资源分开，将函数注入进压缩的静态资源(提升性能)

• 3
  按需加载

  
  
  什么都没有的情况的函数引入.png
  
  
  只编译个 div的 情况.png
  
  
  引入 input 事件绑定 的情况.png
  
  
  引入 transition 情况.png

根据需要渲染的node 按需加载函数方法(减少代码体积，提升性能)

---

---

2 新增特性

ts支持
Fragment Teleport Suspense

• Fragment 不受根节点限制 渲染函数可接受Array
• Teleport 类似Portal 随用随取，弹窗
• Suspense 嵌套的异步依赖 async / setup()

---

---

3 按需加载 （配合vite）& 组合api

• 只打包用到的代码块

---

---

4 组合式api学习

为什么用 composition api 

+ 1）vue2 逻辑复用方式
  + mixin （命名空间冲突  逻辑不清晰 不易复用）
  + scoped solt 作用域插槽 （配置型多 代码分裂 性能差）
  + vue 对ts 支持不充分

+ 2） 代码复用方法 mixin filter 有缺陷
+ 3） vue2 对 ts 支持不充分

• 1. 创建项目

  版本
  node 
  vue create demo 创建项目 // 有vue3 的模板项目

也可选择vue3.0 手动选项.png

• 2. 相关api学习
  • setup 组件选项

// src/components/UserRepositories.vue

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  setup(props) { //props父组件的传参
    console.log(props) // { user: '' }

    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
  // 组件的“其余部分”
}

• 带 ref 的响应式变量

• reactive （设置响应数据）

template>
  

    
    
    {{state.result}}
  

• 独立的 computed 属性

• 父子组件传值

// 子组件



-------------------------------------------------------------------
// 父组件

• 生命周期函数
  

  生命周期函数
  
  因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

• 依赖注入

// 父组件




// 子组件

---

• vite 学习

npm install -g create-vite-app 
npm init vite-app demo
cd demo 
cnpm install // npm 安装有问题
npm run dev

npm安装出错
vite 怎么运行的

---

• todolist 案例

---