1. 響應式值（ref和reactive）

一般：

1、ref用于單個值，

2、reactive用于對象類型的數據。

例如:

const name = ref("zhangsan") const user = reactive({'name': 'zhangsan','age': 18 }) // 當用ref去封裝對象類型的數據時，數據發生變化，watch函數監聽不到， // 而reactive函數可以監控的到watch(user,(newVal)=>{// 輸出新的值console.log('newVal:' , newVal); })const refUser = ref({'name': 'zhangsan','age': 18 })watch(refUser,(newVal)=>{// 輸出新的值( 這個沒辦法被監控到 )console.log('newVal:' , newVal); })

雖然表面上看上去ref和reactive修飾的值都可以發生改變，但是實際ref修飾的值的變化并么有被監控到。

ref和reactive在獲取值時候的區別：

const nameRef = ref("zhangsan") const nameReactive = reactive("zhangsan")// ref需要添加.value // 而reactive不要 console.log(nameRef.value) console.log(nameReactive)

2. composition API (組合式API)

通過組合式API，替代以前的：

export default{data:{},methods:{},computed:{} }// 所有的參數寫在option中 // 不利于寫大項目，你會上上下下來回跳（寫過Vue項目的都懂，寫著寫著就得去找methods在哪） // 找對應的參數的位置會浪費很多不必要的時間

如果你堅持使用上面的書寫方式，當代碼量上去后，你會在data,methods,computed…之間來回跳。

上面是Vue官網中原話，可以作為證明。

尤大大也意識到這個問題，所以才引入了composition API。

composition API ：

import {computed,ref,reactive} from "vue" export default{setup(){// 需要特別注意：// setup函數中的this是undefined// 該函數執行在beforeCreate和Created生命周期函數之前function funcName(){// 直接寫就行，不需要methods屬性里面寫}let data = reactive({name: 'zhangsan',age: 18,addAge: computed(()=>data.age+1) // 計算屬性})return {data,funcName}}}

3. setup函數

setup函數中的this是undefined
該函數執行在beforeCreate和Created生命周期函數之前

無法通過this.xxx, 訪問屬性

setup(props)

props參數可以用于接收來自父組件的參數 （需通過props屬性接收）

context（上下文）中內容非常多：

父組件： <MySubCompone="111"two="222"msg="hello"> </MySubComp>子組件： props: {// 顯示說明屬性one: {type: String,},two: String,},setup(props, context) {console.log('🚀 ~ file: subComp.vue ~ line 14 ~ setup ~ context', context)console.log('🚀 ~ file: subComp.vue ~ line 14 ~ setup ~ props', props)},

// 觸發父組件中的事件 context.emit('MyClick', '子組件向父組件傳輸消息')// 父組件： <script> import MySubComp from '../components/MySubComp.vue' export default {components: {MySubComp,},setup() {function foo(param) {console.log(param)}return {foo,}}, } </script>

同時context可以直接采用es6中的解構

setup(props,{attrs,emit,refs}){// 采用解構的方式的話就不用 context.xxx// 直接采用下面方式即可：emit()attrs.xxxrefs.xxx }

補充：

使用vuecli創建項目意料之外的bug。

self.xhr.send(payload); // 注釋掉這行代碼就行。

可參考這篇文章解決：https://www.cnblogs.com/axu8080/p/15217284.html

總結

以上是生活随笔為你收集整理的Vue3入门笔记—2022年1月9日的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。