Vue3的基础知识与使用

一、vue3的安装

1、全局安装

npm i @vue/cli -g

2、vue3的创建

 vue create 项目名称

 

二、 vue3的特点

    1、新增组合式api

    2、更加接近原生js

    3、按需加载

三、vscode插件推荐         

veturvue

Volar extension pack

 

四、vue2与vue3基本相同，也有不同点

相同点

<template>
  <div>
      <h1>你好Vue3</h1>
      <!-- 02 与2的模板语法基本一致 -->
      <button @click="num++">{{num}}</button><br/>
      <input type="text" v-model.number="num" />
      <p>{{rmsg}}</p>
      <button @click="$say('你好小王')">  全局</button>
  </div>
  <div>
      <h1>第二个根节点</h1>
  </div>
</template>
<script>
export default {
  // 01 生命周期基本一致
  created(){
    console.log("你好vue3，from clog")
  },
  data(){
    return {
      num:1,
      msg:"你好前端开发"
    }
  },
  // 03 与选项基本一致 data methods，computed watch 一致
  computed:{
    "rmsg":function(){
      return  this.msg.split('').reverse().join("");
    }
  }
}
</script>

不同点

1、启动方式

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"")

2、全局方法挂载

vue3

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

   ​{alert(msg)

}

vue2

vue.prototype.$say = function(msg)

{ ​

   alert(msg)

}

3、根节点

v3可以有多个根节点

v2只能有一个根节点

4、生命周期，卸载

vue3   

        beforeUnmount()组件将要卸载

        unmounted组件()已经卸载

vue2

         beforeDestroy()

         destroyed()

生命周期

<template>
  <div>
    <h1>生命周期</h1>
    <button @click="num++">{{num}}</button>
    <button @click="setNum(num+5)">加5</button>
    <p v-for="item in list" :key="item">{{item}}</p>
    <input type="text" v-model="temp" @keyup.enter="addList()">
  </div>
</template>
<script>
  // ref 导入一个创建响应式 值类型数据的方法
  // reactive 响应式 引用类型方法
   import {ref,reactive} from 'vue'
  export default {
    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};
    },
    beforeUnmount(){
      console.log("组件将要卸载")
    },
    unmounted(){
      console.log("组件已经卸载")
    }
  }
</script>

五、setup api

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

1、ref

      创建值类型响应式数据方法

      在seup内部需要.value来访问设置值

2、reactive

      创建引用类型响应式数据方法

3、defineProps

     定义组传的传参props

4、defineEmits

     定义组件发送的事件

5、watch

     监听—个数据的变化

6、watchEffect

     监听多个数据

 7、生命周期

     setup中的生命周期,没有beforecreate与created

     setup的生命周期需要加on前缀