vue3知识点

首先vue3是在vue2的基础上进行改进，增加了setup语法糖。在script里添加setup，这样可以只引入组件，而不用注册，属性、方法不用return就可以在<template>使用，但是需要用ref等来全局应用。

安装：在cmd命令输入框输入vue create 文件名  创建一个vue项目，在里边选项选自己所需要的东西（注意：在选项选到x2或x3时选择x3是vue3的项目）

运行：npm run serve（和vue2大致相同）

vue2和vue3的区别

vue2只能有一个根节点，但是vue3能有多个根节点

启动方式不同 

vue2

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

vue3

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

生命周期卸载不同

vue2是

beforeDestroy()//卸载前

destroyed()//卸载后

vue3是

 

beforeUnmount()        //卸载前
unmounted()      //卸载后

全局挂载方法不同 

vue2

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

vue3

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

setup（要用ref等辅助使用）

setup是无法实现数据响应式更新的，需要和ref函数一起使用才生效

Vue3中的一个新的配置项，值为一个函数。

组件中所用到的：数据、方法等等，均要配置在setup中。

    setup(){

      // 创造一个响应式对象 num 默认值是5

      const num = ref(5);

     

      // 定义更新num的方法

      function setNum(n){

        // 在setup 中num的值访问与赋值要加value 在template不需要

        num.value = n;

      }

       // 返回num

      // 定义一个响应式列表数据

      var list = reactive(["Vue","react","Angular","小程序"])

      // 定义temp 临时数据

      var temp = ref("");

      // 定义添加list 的方法

      function addList(){

        // 注意值类型访问要加value

        list.push(temp.value);

        temp.value = "";

      }

      // 返回 定义的方法与数据

      return {num,setNum,list,temp,addList};

    },

例如：

<script setup>

// 使用setup 可以简写（不用导出，组件不用注册了）

  import { useWinSize } from "@/utils/utils.js";

  import {ref,onMounted} from 'vue';

  const num = ref(5);

  const stepper = ref();

  onMounted(() => {

    console.log("组件已经挂载完毕")

    // 组件挂载完毕引用steper组件

    // stepper.value就是对stepper-com 组件的引用

    console.log(stepper.value.count)

  })

 const size=useWinSize()

</script>

 

ref函数

需要先引入 import { ref } from “vue”;才能使用

作用: 定义一个响应式的数据
语法: var name = ref(value)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
JS中操作数据： name.value
模板中读取数据: 不需要.value，直接：< div> {{name}} < /div>