第二篇 动态数据的计算

javaScript表达式直接计算

原字符串：{{message}}

反转后的字符串：{{message.split('').reverse().join('')}}

method方法

• 《{{book.name}}》{{book.number}}本{{book.price}}元/本 + -

总价：{{totalPrice()}}

测试改变dom的数字 ：{{testCounter}}

• 结论，按钮点击更新后面的数字时，会导致这个组件(#app2)的视图更新，从而引发DOM中的总价：{ {totalPrice()} }重新渲染，里面的方法会被调用，价格就要重新计算一遍。如果计算过程复杂就会有性能问题。
• 视图更新依赖DOM上的数据变化，数据不变视图不会更新的。

watch属性

• 《{{book.name}}》{{book.number}}本{{book.price}}元/本 + -

总价：{{totalPrice}}

测试改变dom的数字 ：{{testCounter}}

• 要监测的目标books写到watch里面，totalPrice就不会被更新dom时调用，而只有books发生变化时才调用。
• 本例中页面加载完后总价格是0，因为此时books没有变动就没有计算，解决方法就是在watch之外(如创建完的钩子函数中)调用。

watch属性异步请求

• 《{{book.name}}》{{book.number}}本{{book.price}}元/本 + -

总价：{{totalPrice}}

• watch具有的异步请求功能，methods方法和computed属性是不具有的。

watch属性不适用的情况

firstName: lastName:

全名：{{fullName}}

• 这个例子中对于firstName和lastName的声明是命令式且重复的，可以用接下来的computed属性来解决

computed属性

firstName2: lastName2:

全名：{{fullName}}

computed属性实现购物车

• 《{{book.name}}》{{book.number}}本{{book.price}}元/本 + -

总价：{{totalPrice}}

• 把某个变量计算的依赖逻辑作为方法写到computed里面，方法返回计算结果，这样只有方法里的变量有变化时才会计算一次，
• 计算属性必须是一个带返回值的方法。

computed属性的get和set方法

全名：{{fullName}}

• 这里取被多个空格分隔的第一个和最后一个拼成全名

computed属性的缓存

computed的date: {{date1}}

methods的date: {{date2()}}

computed的date: {{newDate1}}

methods的date: {{newDate2}}

• 可以发现computed属性读的是缓存值而不会随时间变化，这个缓存机制可以取消：

                      date1: {
                          cache: false,
                          get: function () {
                              return Date.now();
                          }
                      }
                  

• 问题：点选取消缓存可以改变如上cache的值，但却不能生效，猜想是实例初始化后cache不再响应值的变化。而且发发现cache在初始化时取到的复选框值为undefined。
• 因为DOM更新会导致methods的date重新调用，所以在第一次加载时用了v-once指令，意思是只加载一遍后就会冻结。