computed

computed看上去是方法，但是實際上是計算屬性，它會根據你所依賴的數據動態顯示新的計算結果。計算結果會被緩存，computed的值在getter執行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時才會重新調用對應的getter來計算

1）下面是一個比較經典簡單的案例

<template><div class="hello">{{fullName}}</div> </template><script> export default {data() {return {firstName: '飛',lastName: "旋"}},props: {msg: String},computed: {fullName() {return this.firstName + ' ' + this.lastName}} } </script>復制代碼

注意

在Vue的 template模板內（{{}}）是可以寫一些簡單的js表達式的很便利，如上直接計算 {{this.firstName + ' ' + this.lastName}}，因為在模版中放入太多聲明式的邏輯會讓模板本身過重，尤其當在頁面中使用大量復雜的邏輯表達式處理數據時，會對頁面的可維護性造成很大的影響，而 computed 的設計初衷也正是用于解決此類問題。

應用場景

適用于重新計算比較費時不用重復數據計算的環境。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。如果一個數據依賴于其他數據，那么把這個數據設計為computed

watch

watcher 更像是一個 data 的數據監聽回調，當依賴的 data 的數據變化，執行回調，在方法中會傳入 newVal 和 oldVal。可以提供輸入值無效，提供中間值 特場景。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。如果你需要在某個數據變化時做一些事情，使用watch。<template><div class="hello">{{fullName}}<button @click="setNameFun">click</button></div> </template><script> export default {data() {return {firstName: '飛',lastName: "旋"}},props: {msg: String},methods: {setNameFun() {this.firstName = "大";this.lastName = "熊"}},computed: {fullName() {return this.firstName + ' ' + this.lastName}},watch: {firstName(newval,oldval) {console.log(newval)console.log(oldval)}} } </script>復制代碼

總結：?

1.如果一個數據依賴于其他數據，那么把這個數據設計為computed的 ?

2.如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化

轉載于:https://juejin.im/post/5c9990d6f265da60ea146d21

總結

以上是生活随笔為你收集整理的面试题： Vue中的 computed 和 watch的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

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