vue3随手记

vue3目录

• vue3和vue2的区别
• vue3的优点
• vue3的启动方式
• 全局方法的定义
• setup组合api

vue3和vue2的区别

vue3和vue2没什么很大的区别，vue3兼容90%的vue2代码，区别就是vue2的组件是全局安装，而vue3的组件是哪里需要哪里引入，提升了代码的阅读性和打开速度

vue3的优点

按需引用组件，组合式api：更加接近原生js，更加直观。没有this了，更有效的降低的代码的耦合性。

vue3的启动方式

var app = createApp(App)
app.use(router).use(store).mount("#app")

全局方法的定义

app.config.globalProperties.$mysy=function(){}

setup组合api

• ref：定义值类型数据
• reactive：定义引用类型的数据
• import {ref,reactive} from ‘vue’
  setup(){
  const num = ref(5);
  const list = reactive([“vue”,“react”,“anglur”])
  return {num,list}
  }
  {{num}}
  < v-for=“item in list”>

VUE3里面的数据定义和输出

• ref通常定义 值类型的数据但是使用之前需要引入import {ref} from ‘vue’
  定义：const num = ref(5);导出：return {num}
• reactive 定义引用类型的数据使用方法也是ref一样，需要先引入然后再return导出
• computed则是计算，它可以是一个方法，也可以是各种方法的拼接然后赋值给其他
• watch事件监听，用来监听数值的变化然后执行方法
• watchEffect使用这个函数进行监听引用的值，都会被监听
• onMounted生命周期，组件挂载后
• onUnmounted生命周期，组件销毁后
• app.config.globalProperties.$mysay=function(msg){alert(msg+“你好”)}也可以在main.js里面用这种方式来定义全局方法使用
• 关于vue3的更多方法使用可以去查询vue3的官网v3官网