-vue 随笔01 Vue3新特性

-Vue3 随笔01 Vue3新特性
-Vue3 随笔01 Vue3新特性

Vue2 和 Vue3 对比
Vue3 支持大多数Vue特性
Vue3中设计了一套更强大的组合API代替了Vue2中的Option API,复用性更强了
更好的支持TS
最主要: Vue3中使用了Proxy配合Reflec代替了Vue2中object.defineProperty()方法实现数据的响应式(数据代理)
重写虚拟DOM,速度更快
新的组件Fragment(片段),Teleport(瞬移),Suspense(不确定)
设计了一个新的脚手架工具vite

vite搭建Vue3

npm init @vitejs/app --template vue
或者
npm init vite-app <project-name>


  cd xxx
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

#搭建react  npm init @vitejs/app --template react

Vite 官网

vue-cli搭建Vue3

不使用全局安装

### vue-cli 手册
https://cli.vuejs.org/zh/guide/installation.html
### Vue3 手册
https://v3.cn.vuejs.org/guide/migration/introduction.html#快速开始

#开始---局部安装 vue-cli
npm install  @vue/cli
#查看版本
./node_modules/.bin/vue --version
显示:  @vue/cli 4.5.15
#通过ui创建Vue3
./node_modules/.bin/vue ui
#--- 或者只用命令行创建(注意命令行使用cmd,不要使用gitbash否则键盘不能选择)
./node_modules/.bin/vue create 项目名称

生命周期

下表包含如何在 setup () 内部调用生命周期钩子

xxx
| 选项式 API | Hook inside setup |
| —————– | ——————- |
| beforeCreate | Not needed |
| created | Not needed |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeUnmount | onBeforeUnmount |
| unmounted | onUnmounted |
| errorCaptured | onErrorCaptured |
| renderTracked | onRenderTracked |
| renderTriggered | onRenderTriggered |
| activated | onActivated |
| deactivated | onDeactivated |

xxx

生命周期钩子

Vue3中文官方文档
Vue3 辅助文档