VUE3基础

安装
    npm i @vue/cli -g
全局安装脚手架
    vue create 项目名称
    
特点
    1. 新增组合式api
    2. 更加接近原生js
    3. 按需加载
vscode插件推荐
    vetur
    Vue Volar extension Pack
vue3与vue2基本相同
不同
    启动方式

vue3
import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")
vue2
import Vue from 'vue'
new Vue({
   store,
   router,
  render:h=>h(App)
}).$mount("#app")
    全局方法挂载
vue3
app.config.globalProperties.$say = function(msg){alert(msg)}

vue2
Vue.prototype.$say = function(msg){alert(msg)}
    根节点
vue3 可以有多个根节点
vue2只能有一个根节点
    生命周期，卸载
vue3
            beforeUnmount()
组件将要卸载
            unmounted
组件已经卸载
vue2
            beforeDestroy()
destroyed()
setup api
    ref 
        创建值类型响应式数据方法
        在seup内部需要 .value 来访问设置值
    reactive
        创建引用类型响应式数据方法
    defineProps
        定义 组传的传参props
    defineEmits
        定义组件发送的事件
    watch
        监听一个数据的变化
    watchEffect 
        监听多个数据
    生命周期
        setup中的生命周期，没有beforeCreate与created
        setup的生命周期需要加on前缀

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

<script setup></script>

//ref导入一个创建响应式 值类型数据的方法

//reactive 响应式 引用类型方法

import {ref,reactive} from 'vue'

export default {

  setup() {

    // console.log("setup在组件挂载前执行");

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

    const num = ref(5);

    //定义更新num的方法

    function setNum(n) {

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

      num.value = n;

    }

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

    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}

  },

  beforeUnmount() {

    console.log("组件将要卸载");

  },

  unmounted() {

    console.log("组件已经卸载");

  }

}