前言

官網(wǎng)地址：
https://staging-cn.vuejs.org/

vue最新版分為兩個(gè)版本： Vue3.0（20年9月18日） Vue 3.2 （21年8月10日）

#Vue 3.2 +Vite+volar

Vue3 框架做了大量的性能優(yōu)化，包括虛擬 DOM，編譯模板、代理的新數(shù)據(jù)監(jiān)聽，體積更小的打包文件等。

新的組合式 API （composition-api），更適合大型項(xiàng)目的構(gòu)建，去除繁瑣的 this 操作；

由于是基于 TypeScript 編寫，對(duì) TypeScript 原生支持更好，更強(qiáng)大的智能類型推導(dǎo)功能；

生命周期的一些改變，vue2 中的 beforeCreate 和 created 被一個(gè)新增的 setup 生命周期函數(shù)代替；

一些常見 API 如 v-model 的變化，支持對(duì)一個(gè)組件同時(shí)進(jìn)行多個(gè) v-model 的數(shù)據(jù)綁定。

vscode 的插件 vetur 對(duì)vue3 的composition API語法支持度非常弱，所以開發(fā)vue3項(xiàng)目需要將vetur禁用 更換另一個(gè)插件

開發(fā)vue3安裝并使用： volar 插件

#1.項(xiàng)目創(chuàng)建

Vite 官網(wǎng)：https://cn.vitejs.dev/

yarn create vite my-vue-App --template vue     

#2.SFC 單文件組件

html 部分變化不大

vue2的 template 中只能有一個(gè)子節(jié)點(diǎn)，vue3的 template 中可以寫多個(gè)子節(jié)點(diǎn)

js 部分內(nèi)置ts，但是vite創(chuàng)建的項(xiàng)目沒有開啟 ， <script lang="ts" setup> 這樣寫即可支持ts

新增setup 語法糖，js代碼大量簡(jiǎn)化

代碼中不再出現(xiàn) this

css 代碼中 可以使用v-bind 指令

<template>    <div>    </div></template><script setup>       let color = '#f60';</script><style scoped>.box{  width: 100px;  height: 100px;  background: v-bind(color);}</style>

#2. setup語法糖

起初 Vue3.0 暴露變量必須 return 出來，template中才能使用； 這樣會(huì)導(dǎo)致在頁面上變量會(huì)出現(xiàn)很多次。

vue3.2只需在script標(biāo)簽中添加setup,可以幫助我們解決這個(gè)問題。

1.組件只需引入不用注冊(cè)，屬性和方法也不用返回， 也不用寫setup函數(shù)，也不用寫export default ， 甚至是自定義指令也可以在我們的template中自動(dòng)獲得。

#3.data 定義

#3.1 直接定義 無響應(yīng)式

<template>  <div>      <h1>{{name}}</h1>      <!-- 這里雙向綁定失效，直接定義變量沒有響應(yīng)式特性 -->      <input type="text" v-model="name">  </div></template><script setup>  let name = '張麻子';</script>

#3.2 ref 定義基本數(shù)據(jù)類型 有響應(yīng)式

<template>  <div>      <h1>{{name}}</h1>       <!-- 修改數(shù)據(jù) 有響應(yīng)式 -->      <input type="text" v-model="name">      <button @click="setData">修改數(shù)據(jù)</button>  </div></template><script setup> import {ref} from 'vue';        let name = ref('張麻子');   //js中修改數(shù)據(jù)有響應(yīng)式 const setData = ()=>{     name.value = '黃四郎' }     </script>

#3.3 reactvie 定義引用數(shù)據(jù)類型 有響應(yīng)式

<template>  <div>      <h2>{{user.name}}</h2>      <!-- 修改數(shù)據(jù) 有響應(yīng)式 -->      <input type="text" v-model="user.name">      <!-- 新增屬性 -->      <button @click="addItem">新增屬性</button>  </div></template><script setup>import {ref,reactive} from 'vue'let user = reactive({  name:'張麻子',  age:40})// js中新增對(duì)象屬性-可以直接賦值和修改（有響應(yīng)式），在ts環(huán)境下，vscode會(huì)提示錯(cuò)誤，但在頁面中可以正常渲染const addItem = ()=>{  user.like='打豆豆'}</script>

#4.methods 方法定義

<template>  <div>    <!-- 年齡 + -->    <h1>{{user.age}}</h1>    <!-- 調(diào)用方法 -->    <button @click="addAge">年齡+</button>  </div></template><script setup>import { ref, reactive } from "vue";let user = reactive({  name: "張麻子",  age: 40,});//方法const addAge=()=>{    user.age++;}//方法調(diào)用方法const getUserInfo=()=>{  addAge()  console.log(user.age)}</script>

#5.computed 計(jì)算屬性

<script setup>import { ref, reactive, computed } from "vue";let user = reactive({  name: "張麻子",  age: 40,});//計(jì)算屬性const getAge = computed(()=>{  return '我的年齡'+user.age})</script>

#6.watch 使用

watch(監(jiān)聽數(shù)據(jù)源,執(zhí)行函數(shù),[配置參數(shù)])    //配置參數(shù)： 立即執(zhí)行 深度監(jiān)聽{immediate: true, deep: true }

#6.1 監(jiān)聽基本數(shù)據(jù)類型單一數(shù)據(jù)源

<script setup>import {ref, watch} from 'vue' let name = ref('張麻子') //監(jiān)聽器watch(name,(newVal,oldVal)=>{    console.log('變量發(fā)生了改變...',newVal);})</script>

#6.2 監(jiān)聽引用數(shù)據(jù)類型單一數(shù)據(jù)源

<script setup>import {reactive, ref, watch} from 'vue'let user = reactive({name:'張三',age:14}) //監(jiān)聽器watch(()=>user.name,(newVal,oldVal)=>{  console.log('對(duì)象user中的name屬性發(fā)生了變化..',newVal);})</script>

#6.3 監(jiān)聽引用數(shù)據(jù)類型 多數(shù)據(jù)源[深度監(jiān)聽]

<template>  <div>    <button @click="addNum()"> 添加隨機(jī)數(shù)</button>    <div v-for="item in nums" :key="item">{{ item }}</div>  </div></template><script setup>import { reactive, ref, watch } from 'vue'let nums = reactive([]);//添加隨機(jī)數(shù)const addNum = () => {  let num = Math.ceil(Math.random() * 100);  nums.push(num);}//監(jiān)聽數(shù)組變化-深度監(jiān)聽watch(()=>nums,(newVal,oldVal)=>{    console.log('nums數(shù)組發(fā)生了變化..',newVal);},{deep:true})</script>

#7.生命周期

<template>  <div>      <div class="box"></div>  </div></template><script setup>import { onMounted } from 'vue';  //生命周期鉤子監(jiān)聽  onMounted(()=>{    console.log(document.querySelector('.box')); //可以獲取dom  })</script>

#8.組件使用

• 創(chuàng)建 src/components/Son.vue
• App.vue中導(dǎo)入并使用該組件
• vue3.2 中當(dāng)我們導(dǎo)入子組件時(shí)，setup語法糖會(huì)自動(dòng)去注冊(cè)該組件，所以注冊(cè)語句不用寫了。

<template>  <div>    <son></son>  </div><script setup>import Son from './components/Son.vue'</script>

#9.組件通信

#9.1 父?jìng)髯?defineProps

• 父組件

<template>  <div>      <Son class="box" title="我是父組件傳遞的標(biāo)題" :likes="likes"></Son>  </div></template><script setup>  import Son from './components/Son.vue'  let likes = ['張三','李四']</script>

• 子組件

<script setup>const props=defineProps({    title:{        type:String,        default:''    },    likes:{        type:Array,        default:()=>[]    }})</script>

#9.2 子傳父 defineEmits

• 子組件

<template>    <div>        <button @click="sendData">傳遞數(shù)據(jù)</button>    </div></template><script setup>//定義自定義事件const emit = defineEmits(['send'])//自己的事件執(zhí)行函數(shù)const sendData = () => {    //執(zhí)行自定義事件    emit('send', '我是兒子組件傳遞的數(shù)據(jù)')}</script>

• 父組件

<template>  <div>      <Son class="box"  @send="getData" ></Son>  </div></template><script setup>  import Son from './components/Son.vue'  //觸發(fā)自定義事件-接收數(shù)據(jù)  const getData = (data)=>{    console.log(data);  }</script>