vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别_vue.js

computed:{ [key: string]: Function | { get: Function, set: Function } }  

<div id="app">      <!--使用表达式的方式-->      <p v-text="originalPrice - discountPrice"></p>      <!--使用计算属性的方式-->      <p v-text="currentPrice"></p>  </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script>      let app = new Vue({          el: '#app',          data: {               id:1,              originalPrice:1200,              discountPrice:200,          },          //计算属性          computed: {              // 把日期换成 常见规格格式的字符串。              currentPrice: function () {                  return "当前价格:" + (this.originalPrice - this.discountPrice);              }          }      });  

<div id="app1">      <p v-text="currentPrice"></p>  </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script>      let app = new Vue({          el: '#app',          data: {              id: 1,              originalPrice: 1200,              discountPrice: 200,          },          //计算属性          computed: {               cache:false,              // 把日期换成 常见规格格式的字符串。              currentPrice: {                  get: function () {                      return "当前价格:" + (this.originalPrice - this.discountPrice);                  },                  // 注意必须要传递参数,否则没有意义                  set: function (value) {                       //执行自定义的一下操作                      this.discountPrice = value                  }              }          }      });  </script>  <!--   在 console 中 输入 app.currentPrice=300   1> 先执行get方法改变discountPrice的值  2> 因为数据发生改变了 所以会重新计算当前的价格, 执行get方法  -->  

<!-- 响应式依赖 -->  <script>      var vm = new Vue({        data: {          // 声明 message 为一个空值字符串          message: ''        },      })      // 响应式      vm.message = 'Hello!'        vm.v="非响应式的的值"  </script>  

<div id="app">      <button @click="getMethodsDate">methods</button>      <button @click="getComputedDate">computed带缓存</button>  </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script type="text/javascript">      new Vue({          el: '#app',          methods: {              getMethodsDate: function () {                  console.log(new Date().toLocaleTimeString())              },              // 返回computed选项中设置的计算属性——computedDate              getComputedDate: function () {                  console.log("缓存--->" + this.computedDate)              }          },          computed: {              computedDate: function () {                  return new Date().toLocaleTimeString()              }          }      })  </script>    

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <script>      let vm = new Vue({          data: {              test: "111",              user: {                  name: "码帝",                  address: {                      city: "大武汉"                  }              }          },          methods: {              fun: function (val) {                  alert(val)              }          },          watch: {              // 方法名方式 对应 methods中的函数名              // test: 'fun',              // 函数方式              test: function (v1, v2) {                  alert("新值" + v1 + "====旧值:" + v2)              },              /**               *什么是深度 例如  data: {test: "111", user: {name: "码帝" ,address{city:'大武汉'}}               * user属性对应值就是深层,一次内推               * 如果我们监听的user属性 当user.name属性发生改变的时候 watch监听是不到,所有我们这里需要使用深层监听               */              //              user: {                  handler: function (val) {                      alert(val.name)                  },                  // 是否深度监听 默认是false                  // 如果不设置为true当我们手动设置vm.user.name = "撸帝"的时候,是监听不到的                  deep: true              },              /**               * 或者也可以使用下面的方式来监听               * 注意键值必须是一个字符串，所以用引号括起来               *               */                "user.address.city": function (val) {                  alert(val)              }          }      });      vm.test = '333';      vm.user.name = "撸帝";      vm.user.address.city = '长沙'  

<div id="app">      <input type="text" v-model="search"/>      <ul>          <li v-for="result in results" v-text="result"></li>      </ul>  </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <script>      let vm = new Vue({          el: "#app",          data: {              user:{                  name:"码帝",              }              search: "",              results: [],                        },          methods: {            fun: function () {              alert("111");            }          }          watch: {           // 使用函数              search: function (v1, v2) {               console.log('新值: %s, 旧值: %s', v1, v2)                  this.results.push(v1)              }          }                })  </script>