vue3函式setUp和reactive函式詳細講解

明月人倚樓發表於2021-06-09
Vue函式React

1 setUp的執行時機

我們都知道，現在vue3是可以正常去使用methods的。
但是我們卻不可以在setUp中去呼叫methods中的方法。
為什麼了？？？
我們先了解一下下面這兩個生命週期函式，分別是：
beforeCreate 表示data 中的資料還沒有初始化，是不可以使用的
Created : data已經被初始化了，可以使用
setUp在beforeCreate 和 Created 這兩個函式之間。
是不是就知道為啥setUp中不可以去呼叫methods中的方法了。

2.setUp中無法使用data中的資料和呼叫methods的方法

<script>
export default {
  name: 'App',
  data:function(){
    return {
      mess:"我是data"
    }
  },
  methods:{
    func(){
      console.log("methods中的func")
    },
  },
  setup(){
    console.log('this',this);//undefined
    this.func();//無法呼叫的哈
  },
}
</script>

3.setUp函式的注意點

(1)由於我們不能夠在setUp函式中使用data和methods.
所以vue為了避免我們的錯誤使用,直接將setUp函式中的this
修改成為了undefined

(2) setUp函式只能夠數同步的，不能夠是非同步的哈。
就是說你不能夠這樣操作
async setup(){
   
},
這樣會導致介面空白哈

4 Vue3中的reactive

在Vue2中響應式資料是通過de fineProperty來實現的.
而在Vue3中響應式資料是通過ES6的Proxy來實現的

reactive需要的注意點
reactive引數必須是物件(json/arr)
如果給reactive傳遞了其它物件
預設情況下修改物件，介面不會自動更新
如果想更新，可以通過重新賦值的方式

5 reactive傳入字串資料不跟新

<template>
 <div>
    <div>
      <li>{{str}}</li>
      <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    //  reactive 的本質就是傳入的資料包裝成一個proxy物件
    // 由於在建立的時候，傳遞的不是一個物件，那麼將不會實現響應式。
    let str=reactive(123)
    function func1(){
      console.log(str);//123
      str=666;
    }
    return {str,func1 }
  },
}
</script>

我們發現點選按鈕的時候，檢視並沒有更新。
因為我們傳不是一個物件.如果想跟新檢視。
應該使用ref函式

6 reactive傳入陣列

<template>
 <div>
    <div>
      <li>{{arr}}</li>
      <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let arr=reactive([{name:'張三',age:19},{name:'李四',age:39}])
    function func1(){
      arr[0].name="我是張三的哥哥"
    }
    return {arr,func1 }
  },
}
</script>

7 reactive傳入其他物件的跟新方式

<template>
 <div>
    <div>
      <li>{{sate.time}}</li>
      <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let  sate=reactive({
      time:new Date()
    })
    function func1(){
      //傳入的是其他物件，直接跟新
      sate.time="2021年-6月-9日";
    }
    return {sate,func1 }
  },
}
</script>

如果你覺得我寫的還不錯的話
請我幫我點選一個推薦
這是我寫下去的動力
如果有不清楚不明白的地方，歡迎評論！

相關文章