詳解vue3中setUp和reactive函式的用法
阿新 • • 發佈:2021-06-13
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引數必須是物件(js程式設計客棧on/arr)
預設情況下修改物件,介面不會自動更新
如果想更新,可以通過重新賦值的方式
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:'張三',a程式設計客棧ge:19},{name:'李四',age:39}])
function func1(){
arr[0].name="我是張三的哥哥"
}
return {arr,}
</script>
7 reactive傳入其他物件的跟新方式
<template>
www.cppcns.com <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,}
</script>
以上就是vue3 setUp和reactive函式詳細講解的詳細內容,更多關於vue3 setUp和reactive函式的資料請關注我們其它相關文章!