vue3基础知识

vue3 安装

1. npm i @vue/cli -g全局安装脚手架
2. vue create 项目名称
3. 之后的选项是
   1.Manually select features
   
   2. 3.x
   3. n
   4. Sass/SCSS (with dart-sass)
   5. ESLint with error prevention only
   6. Lint on save
   7. In dedicated config files
   8. n
   

vue的特点

1. 新增组合式api
2. 更加接近原生js
3. 按需加载

vscode插件推荐

1. vetur

2. Vue Volar extension Pack
   这是一个整的插件包，里面有很多插件

vue3与vue2的区别

1.启动方式不同

1. v3

   import {createApp} from 'vue'
   createApp(App).use(router).use(store).mount("#app")
   

2. v2

   import Vue from 'vue'
   new Vue({
      store,
      router,
     render:h=>h(App)
   }).$mount("#app")
   

2.全局方法挂载

1. v3

   	app.config.globalProperties.$say = function(msg){alert(msg)}
   

2. v2

   Vue.prototype.$say = function(msg){alert(msg)}
   

根节点

1.v3 可以有多个根节点
2.v2 只能有一个根节点

生命周期，卸载

1.v3

beforeUnmount()组件将要卸载
unmounted组件已经卸载
2.v2
beforeDestroy()destroyed()

setup api

1. ref 创建值类型响应式数据方法
   在seup内部需要 .value 来访问设置值
2. reactive 创建引用类型响应式数据方法
3. defineProps 定义 组传的传参props
4. defineEmits 定义组件发送的事件
5. watch 监听一个数据的变化
6. watchEffect 监听多个数据
7. 生命周期 setup中的生命周期，没有beforeCreate与created
   setup的生命周期需要加on前缀