我們知道，在模板中可以直接透過插值語法顯示一些data中的數據，但是在某些情況，我們可能需要對數據進行一些轉換後再顯示，或者需要將多個資料結合起來進行顯示
在模板中使用表達式，可以非常方便的實現，但是設計它們的初衷是用於簡單的運算，在模板中放入太多的邏輯會讓模板過重和難以維護，如果多個地方都使用到，那麼會有大量重複的程式碼
所以我們希望將業務邏輯和UI介面進行分離，其中一種方式就是將邏輯抽取到一個在method中，但這種做法有以下弊端
所有的data使用過程都會變成了一個方法的呼叫
對於任何包含響應式數據的複雜邏輯，你都應該使用計算屬性
<div id="app">
<!-- 计算属性的使用和普通状态的使用方式是一致的 -->
<h3>{{ fullname }}</h3>
</div>
<script>
Vue.createApp({
data() {
return {
firstname: 'Klaus',
lastname: 'Wang'
}
},
computed: {
fullname() {
return this.firstname + ' ' + this.lastname
}
}
}).mount('#app')<div id="app">
<!-- 计算属性的使用和普通状态的使用方式是一致的 -->
<h3>{{ fullname }}</h3>
<button @click="change">change</button>
</div>
<script>
Vue.createApp({
data() {
return {
firstname: 'Klaus',
lastname: 'Wang'
}
},
methods: {
change() {
this.fullname = 'Alex Li'
}
},
computed: {
// 计算属性的完整写法
fullname: {
get() {
return this.firstname + ' ' + this.lastname
},
set(v) {
this.firstname = v.split(' ')[0]
this.lastname = v.split(' ')[1]
}
}
}
}).mount('#app')
</script>Vue.createApp({
data() {
return {
info: {
name: 'Klaus'
}
}
},
watch: {
// 可以使用watch监听响应式数据的改变
// 对应有两个参数
// 参数一 --- 新值
// 参数二 --- 旧值
info(newV, oldV) {
// 如果监听的值是对象，获取到的新值和旧值是对应对象的代理对象
console.log(newV, oldV)
// 代理对象 转 原生对象
// 1. 使用浅拷贝获取一个新的对象，获取的新的对象为原生对象
console.log({...newV})
// 2. 使用Vue.toRaw方法获取原生对象
console.log(Vue.toRaw(newV))
}
},
methods: {
change() {
this.info = {
name: 'Steven'
}
}
}
}).mount('#app')| 說明 | |
|---|---|
| 是否開啟深度監聽 | 值為boolean未開啟的時候，如果監聽的是對象，那麼只有對象的參考發生改變的時候，才會觸發watch回呼 開始後，如果監聽的是對象，那麼只要對像中的任一個屬性發生了改變，就會觸發watch回調 |
| 是否立即開始監聽 | 預設情況下，初次渲染是不會觸發watch監聽，只有當值改變後，才會觸發watch監聽將immediate設定為true後，初次渲染也會觸發watch監聽，此時oldValue的值為undefined |
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">watch: {
&#39;info.name&#39;(newV, oldV){
console.log(newV, oldV)
}
}</pre><div class="contentsignin">登入後複製</div></div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">Vue.createApp({
data() {
return {
info: {
name: &#39;Klaus&#39;
}
}
},
watch: {
// watch的值如果是一个字符串的时候
// 会自动以该字符串作为函数名去methods中查找对应的方法
&#39;info.name&#39;: &#39;watchHandler&#39;
},
methods: {
change() {
this.info.name = &#39;Steven&#39;
},
watchHandler(newV, oldV){
console.log(newV, oldV)
}
}
}).mount(&#39;#app&#39;)</pre><div class="contentsignin">登入後複製</div></div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">Vue.createApp({
data() {
return {
info: {
name: &#39;Klaus&#39;
}
}
},
watch: {
&#39;info.name&#39;: [
&#39;watchHandler&#39;,
function handle() {
console.log(&#39;handler2&#39;)
},
{
handler() {
console.log(&#39;handler3&#39;)
}
}
]
},
methods: {
change() {
this.info.name = &#39;Steven&#39;
},
watchHandler(){
console.log(&#39;handler1&#39;)
}
}
}).mount(&#39;#app&#39;)</pre><div class="contentsignin">登入後複製</div></div>
Vue.createApp({
data() {
return {
info: {
name: 'Klaus'
}
}
},
created() {
/*
$watch 参数列表
参数一 --- 侦听源
参数二 --- 侦听回调
参数三 --- 配置对象
*/
this.$watch('info.name', (newV, oldV) => console.log(newV, oldV), {
immediate: true
})
},
methods: {
change() {
this.info.name = 'Steven'
}
}
}).mount('#app')
以上是Vue3中的計算屬性及偵聽器怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
