<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hongbin</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>Vue.config.productionTip = false;</script>
</head>
<body>
<div id="app">
<h4>02_computed 中讲到 computed实现的，通过methods也可以达到，那么他们俩的使用场景有何分别呢？<br>也就是为什么会有computed和methods两种方式，能够达到同一种效果，什么时候用computed，什么时候用methods呢？
</h4>
<strong>message</strong>: {{ message }}<br>
<input @blur="change" placeholder="messageVal" ref="m_val" type="text"><br>
<strong>method</strong>:<p>{{ methodsReverse() }}</p>
<strong>computed</strong>:<p>{{ computedReverse }}</p>
<pre>
通过methods和computed完成的效果是一样的，
但是，不同的是：计算属性是基于它的依赖缓存。计算属性只有它的相关依赖发生改变时才会重新取值，
这就意味着只要message没有发生改变，多次访问computedReverse计算属性会立即返回之前的结果，而不必执行函数。
下面还有个例子：
</pre>
<p>{{ now }}</p>
<p>{{ m_now() }}</p>
<pre>
官方语言：
计算属性获取时间的now 属性在当前时间不变（值不变）的情况下，计算属性不会更新，因为Date()不是响应式依赖。
相比而言：每当重新渲染的时候，method调用总会执行函数。
自己理解：给每个方法一个console.log('xx')来查看当前触发哪些方法了，当前来说，页面加载完成，模板需要被调用的方法都被触发，每一个方法却是被正确触发，
此时时间已经固定，值不变的情况下，计算属性不会更新，当触发change方法，该变message的值时，问题出现了：
message的值发生变动，input的失去焦点事件change触发，计算属性的依赖发生变化，所以计算属性computedReverse触发，methods方法methodsReverse触发，
然而，methods的m_now也被触发，导致用m_now获取的Date重新渲染，时间变成当前方法触发的时间，
而此时，计算属性的Date依赖并没有被改变，所以用now计算属性获取的时间没有发生变化，方法也没有触发，
以此推断，在methods中一个方法触发时，methods中的函数会重新渲染，里面的方法都会被触发，而计算属性有计算缓存，根据相关依赖是否发生变化来决定是否触发方法，
所以，计算属性相比methods更具节省性能优势，
看控制台即可发现以上事件
</pre>
{{ text() }}
<!-- 没跑了，上面这个text测试方法，就是用来测试上面结论，methods中的方法都会被触发，是否正确，答案是确实如此 change改变massage 结果text也被触发，虽然页面展示没有影响，但如果methods方法众多的话，重新渲染就会影响性能，先到这更深的理解待日后vue学习的深入，下一节研究 computed vs watched 这个就简单点 -->
</div>
<script>
let app = new Vue({
el: "#app",
data() {
return {
message: "computed vs methods"
}
},
methods: {
change() {
console.log("change");
this.message = this.$refs.m_val.value;
},
methodsReverse() {
console.log("methodsReverse");
return this.message.split('').reverse().join('');
},
m_now() {
console.log("m_now");
return Date();
},
text(){
console.log("true")
}
},
computed: {
computedReverse() {
console.log("computedReverse");
return this.message.split('').reverse().join('');
},
now() {
console.log("now");
// return Date.now();//now()返回的时从1970年1月1日UTC 00:00:00到现在为止经过的毫秒数Number，太吓人了，咱换个
return Date();//返回现在的时间
}
}
})
</script>
</body>
这是页面刚加载完毕被触发的方法
这是触发change改变message之后哪些方法被触发：
正常改变message触发，改变message的事件，和用methods实现的message顺序颠倒和computed实现的message顺序颠倒，可是当前，methods中m_now方法也被触发，使Date重新渲染，获取了和上次不同的时间结果，原本两个方法实现的效果一样，现在因methods重新渲染，导致产生不同，如果这正是我们想要的可以，但如果不是，就要预防这种意外渲染发生。
