Vue3中的setup語法糖、computed函數、watch函數如何用
- 王林轉載
- 2023-05-17 11:58:062648瀏覽
setup 語法糖
#大家發現沒有，在我們前面幾篇文章中的案例程式碼中，每個案例的範本中都有一些雷同程式碼，這些程式碼就是我們的setup函數，但是作為組合API的入口函數，我們所有的組合式API都要寫到裡面，難道我們每次都要寫上這一坨麼，其實在Vue中提供了setup 的語法糖，語法糖大家都知道是什麼嘛？
就例如我們Vue2中的 v-model 不就是語法糖麼，可以透過這樣一個指令省去了大量的雙向資料綁定的程式碼！那我們來看看我們的setup都夠簡化成為什麼樣子，以下面代碼為例，我們聲明一個函數，點擊按鈕觸發喊出打印hi 這樣一個簡單的效果；
<template>
<div>
<button @click="hello">hello</button>
</div>
</template>
<script>
export default {
setup() {
const hello = () => {
console.log('hi')
}
return { hello }
}
}
</script><pre class="brush:js;toolbar:false;"><template>
<div>
<button @click="hello">hello</button>
</div>
</template>
<script setup>
const hello = () => {
console.log(&#39;hi&#39;)
}
</script></pre> <p>上面是我們使用setup語法糖後的程式碼效果，功能實作上是一樣的；在script setup 的標籤中，所有的資料、函數可以直接在模板中使用！ </p>
<blockquote><p>在script setup 中的頂層變數都可以直接在模板中使用</p></blockquote>
<h3><strong>computed函數</strong></h3>
<p>computed 函數的使用：其實我們什麼情況下會使用計算屬性呢，那一定是透過依賴的資料得到新的資料！ </p>
<p>1）從Vue中引入computed<br> 2）在setup中進行使用，將一個函數，函數的回傳值就是計算好的資料<br> 3）最後呢透過setup回傳出去，模板進行使用，如果使用setup語法糖後其實不需要這一步了</p>
<p>我們可以舉一個簡單的例子，比如我們定義一個成績數字，單純的分數信息，那我們通過computed 函數來為我們計算出超過60份的及格成績；我們就直接用script setup 的方式來編碼了哈！ </p><pre class="brush:js;toolbar:false;"><template>
<div>
<p>成绩单</p>
<a v-for="num in achievement"> {{ num }} / </a>
<p>及格成绩单</p>
<a v-for="num in passList"> {{ num }} / </a>
</div>
</template>
<script setup>
import { computed, ref } from &#39;vue&#39;;
const achievement = ref([44, 22, 66, 77, 99, 88, 70, 21])
const passList = computed(() => {
return achievement.value.filter(item => item > 60)
})
</script></pre><p><img src="https://img.php.cn/upload/article/000/465/014/168429588769802.jpg" alt="Vue3中的setup語法糖、computed函數、watch函數如何用"></p>
<h3><strong>watch 函數</strong></h3>
<p>#跟computed函數一樣，watch函數也是組合API中的一員，watch其實就是監聽資料變化的函數，那麼在Vue3中它有哪些用法呢？可以使用watch監聽一個或多個響應式數據，可以使用watch監聽響應式數據中的一個屬性（簡單數據or 複雜數據）可以配置深度監聽，也可以使用watch監聽實現預設執行；我們來分開嘗試程式碼的寫法</p>
<p><strong>透過watch監聽一個數據</strong> </p>
<blockquote><p>watcha監聽一個數據，函數兩個參數：第一個要監聽的數據，第二個參數是監聽值改變後觸發的回呼函數，其中回呼函數也有兩個參數新值、舊值</p></blockquote><pre class="brush:js;toolbar:false;"><template>
<div>
总赞数：{{ num }} <button @click="num++">点赞</button>
</div>
</template>
<script setup>
import { ref, watch } from &#39;vue&#39;;
//创建一个响应式数据，我们通过点赞按钮改变num的值
const num = ref(0)
watch(num, (nv, ov) => {
console.log(nv, ov)
})
</script></pre><p><img src="https://img.php.cn/upload/article/000/465/014/168429588821279.jpg" alt="Vue3中的setup語法糖、computed函數、watch函數如何用"></p>
<p><strong>透過watch監聽多個數據</strong> </p>
<blockquote><p>watcha監聽多個數據，例如下面的我們需要監聽num和user物件的變化，函數兩個參數：第一個要監聽的數據（因為是多個數據所以用數組），第二個參數是監聽值改變後觸發的回調函數。 </p></blockquote><pre class="brush:js;toolbar:false;"><template>
<div>
总赞数：{{ num }} <button @click="num++">点赞</button>
</div>
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
<button @click="user.age++">过年啦</button>
</template>
<script setup>
import { ref, watch, reactive } from &#39;vue&#39;;
const num = ref(0)
let user = reactive(
{
name: "几何心凉",
age: 18
}
)
watch([num, user], () => {
console.log(&#39;我监听到了&#39;)
})
</script></pre><p><img src="https://img.php.cn/upload/article/000/465/014/168429588859832.jpg" alt="Vue3中的setup語法糖、computed函數、watch函數如何用"></p>
<p><strong>透過watch監聽物件的一個屬性（簡單型別）</strong> </p>
<blockquote><p>watch監聽物件的一個屬性並且是簡單類型的屬性，例如我們監聽下面的user中的age值，他是一個簡單類型，那我們watch的第一個參數形式需要是將物件屬性作為傳回值的函數；第二個參數是改變後的回調函數。 </p></blockquote><pre class="brush:js;toolbar:false;"><template>
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
<button @click="user.age++">过年啦</button>
</template>
<script setup>
import { ref, watch, reactive } from &#39;vue&#39;;
let user = reactive(
{
name: "几何心凉",
age: 18
}
)
watch(()=>user.age, () => {
console.log(&#39;我监听到了user.age的变化&#39;)
})
</script></pre><p><img src="https://img.php.cn/upload/article/000/465/014/168429588821201.jpg" alt="Vue3中的setup語法糖、computed函數、watch函數如何用"></p>
<p><strong>透過watch監聽物件的一個屬性（複雜型別）</strong> </p>
<blockquote><p>watch監聽物件的一個屬性且是複雜類型的屬性，例如下面的我們要監聽user中的info，我們嘗試改變user中info中的wages值，那麼我們watch的第一個參數形式需要是將物件屬性作為傳回值的函數；第二個參數是改變後的回調函數。這時候還需要第三個參數那就是deep 開啟深度監聽</p></blockquote><pre class="brush:js;toolbar:false;"><template>
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
<p>薪资：{{ user.info.wages }}</p>
<button @click="user.age++">过年啦</button>
<button @click="user.info.wages+=2000">加薪了</button>
</template>
<script setup>
import { ref, watch, reactive } from &#39;vue&#39;;
let user = reactive(
{
name: "几何心凉",
age: 18,
info:{
wages:20000
}
}
)
watch(()=>user.info, () => {
console.log(&#39;我监听到了user.info的变化&#39;)
},{
deep:true
})
</script></pre><p><img src="https://img.php.cn/upload/article/000/465/014/168429588816908.jpg" alt="Vue3中的setup語法糖、computed函數、watch函數如何用"></p>
<p><strong>#透過watch監聽資料預設執行</strong> </p>
<blockquote>
<p></p>############透過watch監聽資料預設執行### ##### ####其實這種情況並不多但是也會遇到這種情況，就是我們在監聽資料變化的時候，先預設執行一次；其實就是加入我們的immediate參數為true，我們以最初的num為例哈！ ###</blockquote><pre class="brush:js;toolbar:false;"><template>
<div>
总赞数：{{ num }} <button @click="num++">点赞</button>
</div>
</template>
<script setup>
import { ref, watch, reactive } from &#39;vue&#39;;
const num = ref(0)
watch(num, () => {
console.log(&#39;我打印了&#39;)
},{
immediate:true
})
</script></pre><p><img src="https://img.php.cn/upload/article/000/465/014/168429588835937.jpg" alt="Vue3中的setup語法糖、computed函數、watch函數如何用"></p>以上是Vue3中的setup語法糖、computed函數、watch函數如何用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：yisu.com。如有侵權，請聯絡admin@php.cn刪除