1.生命周期和組合式api（Composition API）

在原有vue2的生命周期基礎上在前綴加上on，例如：onMounted；使用組合式api的方法,生命周期函數(shù)需要引入使用

<script setup>
import { onBeforeMount } from "vue";
onBeforeMount(() => {

})
</script>

Tips:setup 是圍繞 beforeCreate 和 created 生命周期鉤子運行的，所以不需要顯式地去定義。

2.響應式賦值和寫法

使用ref，reactive來分別復制普通數(shù)據(jù)類型和復雜數(shù)據(jù)類型，使用組合式api寫法，依然要進行引入。例如：

import { ref, reactive } from "vue";

let obj = reactive({ list: {} })
let num = ref(0)
let arr = ref([])

注冊一個點擊事件

//ref響應式賦值需要.value操作num的值，讀取num的值不需要.value
//ref通過Object.defineProperty()的get和set實現(xiàn)數(shù)據(jù)劫持
function add() {
  num.value++
}

//reactive響應式賦值可以直接取值
//reactive通過Proxy實現(xiàn)數(shù)據(jù)劫持
function edit() {
  obj.list = {old:1}
}

3.多根節(jié)點

可以有多個根節(jié)點。例如：

<template>
   <div class="root"></div>
   <div class="root"></div>
   <div class="root"></div>
</template>

4.全局變量和全局方法

相較于vue2，vue3的組合式寫法，沒有了this，無法直接指向vue實例，取得項目創(chuàng)建的全局方法和變量，但是vue3提供了一個proxy，記錄了變量和方法，但是需要引入使用。例如：

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()

創(chuàng)建一個文件夾mock，新建一個test.js文件，文件中寫入點需要全局使用的變量等。

let mockJs = {
  skuData: [{
    list: [
      "5kg",
      "10kg",
      "15kg"
    ],
    name: "重量"
  }, {
    list: [
      "紅色",
      "黃色"
    ],
    name: "顏色"
  }]
}

export default mockJs

在main.js文件中導入，然后注冊到全局中

import { createApp} from 'vue'
import App from './App.vue'
import mockData from '../mock/test'
const app = createApp(App)
//關鍵代碼，不在使用vue2的prototype了，而是使用app.config.globalProperties.mockData來操作原型
app.config.globalProperties.mockData = mockData

app.mount('#app')

使用時引入實例，結構出proxy

import { getCurrentInstance,reactive } from "vue";
const { proxy } = getCurrentInstance()
let data = reactive({skuData:{}})
//不使用this. 而是使用proxy.
data.skuData = proxy.mockData.skuData

5.Teleport(獨立組件) vue3內置組件的使用

Teleport組件主要作用是當項目中需要使用到模態(tài)框，不是相較于父級定位的html結構時，可以使用

//to可以把組件發(fā)送到body中，后續(xù)的定位等也是相較于body定位，disabled：顯示和隱藏
<teleport to='body' :disabled="disabled">
      <div class="dialog" v-if="disabled">
        dialog
      </div>
 </teleport>


//這樣就可以實現(xiàn)一個視圖左右垂直居中的模態(tài)框了，僅僅只要操作組件中的元素就行，方便很多
.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: #fc6d18;
  }

6.響應式原理

vue2的響應式原理用Object.defineProperty的get和set進行數(shù)據(jù)劫持，從而實現(xiàn)響應式

(1).vue2中只有get和set方法去進行屬性的讀取和修改操作，當我們進行新增，刪除時，頁面不會實時更新

(2).直接通過下標改數(shù)組，頁面也不會實時更新

vue3中響應式原理使用Proxy進行代理，使用window內置對象Reflect反射

(1).Proxy可以攔截對象中任意的屬性變化，當然包括讀寫，添加，刪除等

(2).Reflect對源對象屬性進行操作

const data = new Proxy(data, {
// 讀取屬性時調用
    get (target, propName) {
        return Reflect.get(target, propName)
    },
//修改屬性或添加屬性時調用
    set (target, propName, value) {
        return Reflect.set(target, propName, value)
    },
//刪除屬性時調用
    deleteProperty (target, propName) {
        return Reflect.deleteProperty(target, propName)
    }
}) 

7.組合式api寫法補充 computed、watch、watchEffct

computed

<template>
     <div>
        {{ fullName }}
     </div>
</template>

import {  reactive, computed } from "vue";
let message = reactive({
  name: '小明',
  old: '18'
})

let fullName = computed(() => {
  return message.name + '，今年' + message.old
})

watch

<template>
    <p @click="add">{{ num }}</p>
</template>
import {  ref,watch } from "vue";
let num = ref(0)
function add() {
  num.value++
}
watch(num, (newValue, oldValue) => {
  console.log('num變動了' + 'num' + 'oldValue：' + oldValue + ' ' + 'newValue：' + newValue);
})

watchEffct 默認開啟 immediate:true

<template>
    <p @click="add">{{ num }}</p>
</template>
import {  ref,watchEffect } from "vue";
let num = ref(0)
function add() {
  num.value++
}
watchEffect(() => {
  console.log('watchEffect' + num.value);
})

8.hooks函數(shù)的使用

新建一個hooks文件夾，創(chuàng)建一個hooks.js的文件

import {
  reactive,
  onMounted,
  onBeforeUnmount
} from 'vue'
export default function () {
  //鼠標點擊坐標
  let point = reactive({
    x: 0,
    y: 0
  })

  //實現(xiàn)鼠標點擊獲取坐標的方法
  function savePoint(event) {
    point.x = event.pageX
    point.y = event.pageY
    console.log(event.pageX, event.pageY)
  }

  //實現(xiàn)鼠標點擊獲取坐標的方法的生命周期鉤子
  onMounted(() => {
    window.addEventListener('click', savePoint)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('click', savePoint)
  })

  return point
}

使用hooks定義的方法

//導入，調用
import hooks from '../../hooks/hooks'
hooks()

9.router

router.js

import {
  createRouter,
  createWebHashHistory
} from "vue-router"

const routes = [{
    path: '/',
    component: () => import('../view/HelloWorld.vue')
  },
  {
    path: '/home',
    name: "home",
    component: () => import('../view/home.vue')
  },

]
export const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
})

export default router

在vue3定義了一個vue?router,直接引入useRoute,useRouter，相當于vue2中提供的this.route，this.router

import { useRouter, useRoute } from "vue-router";
// ---router---
const route = useRoute()
const router = useRouter()

//定義一個點擊事件toHome
function toHome() {
  router.push('/home')
}

10.父組件和后代組件之間的傳參

使用provide，inject

//父組件
<template>
  <div>
    home
  </div>
  <home-son />
</template>

<script setup>
import homeSon from '../components/homeSon.vue'
import { provide, reactive } from 'vue';

const data = reactive({
  name: '小紅',
  old: 18
})
provide('datas', data)

</script>

//后代組件
<template>
  <div>
    我是后代組件
  </div>
  <div>
    父組件傳遞過來的值:{{ datas.name + '今年' + datas.old }}
  </div>
</template>

<script setup>
import { inject } from 'vue'
let datas = inject('datas')
</script>

11.父子組件之間的傳值

父傳子 props

<template>
  <p>我是父組件</p>
  <home-son :propsData="propsData" />
</template>

<script setup>
import homeSon from '../components/homeSon.vue'
import { reactive } from 'vue';

const propsData = reactive({
  name: '小明',
  old: 20
})

</script>

<template>
  <div>
    我是后代組件
  </div>
  <p>
    props父組件傳遞過來的值:{{ propsData.name + '今年' + propsData.old }}
  </p>
</template>

<script setup>
// 父傳子
//defineProps不需要引入，直接使用
let props = defineProps({
  propsData: {
    type: Object
  }
})
</script>

子傳父 emit

<template>
  <div>
    home
  </div>
  <p>我是父組件:</p>
  <p>子傳父過來的值：{{ emitData.emitData.name + '今年' + emitData.emitData.old }}</p>
  <home-son  @emitDatas="emitDatas" />
</template>

<script setup>
import homeSon from '../components/homeSon.vue'
import {  reactive } from 'vue';

let emitData = reactive({ emitData: {} })
function emitDatas(data) {
  emitData.emitData = data
}

</script>

<template>
  <div>
    我是后代組件:
  </div>
</template>

<script setup>
// 子傳父
//defineEmits不需要引入，直接使用
let emits = reactive({
  name: '小清',
  old: 30
})
const emit = defineEmits(['emitDatas'])  //語法糖寫法
emit('emitDatas', emits)
</script>