计算属性 监督机制 CLASS STYLE

计算属性

什么是: 不实际属性值，绑定时，动态通过其他现有属性，计算出自己的属性值。
何时: 页面上需要一个值，但是，这个值数据库中没有直接保存，而是需要动态计算出来。
使用计算属性：计算属性虽然定义成函数，但是，
用法和普通模型变量完全一样！不要加()

特点: 
1. 只要依赖的其它变量变化，计算属性都会自动重新计算
2. 一个属性如果多个位置使用，其实只计算一次。
原理: 计算属性的值，每计算一次，结果都会被Vue框架缓存起来，反复使用。除非依赖的变量发生改变时，才重新计算，然后再重新缓存，反复使用。
	vs 函数: 也可以实现计算的效果
	问题: 不会被缓存！每用一次就重复计算一次！
	总结: 如果只关心计算结果时，首选计算属性
	如果不关心结果，甚至没有返回值，只关心执行的过程时，首选函数。
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

监督机制 WATCH

watch监控机制: 
什么是: Vue中的watch监控机制可监控vue所有模型变量的变化。
只要模型变量变化，就自动触发一个同名的函数。
在函数中可调试变量的值或执行实时操作
何时: 希望只要变量的值变化，就立刻做一件事儿时
如何:        new Vue({
               	el:"#app", //找要监控的整个页面空间
			   	data:{ 
					变量1:值1
                }, //所有页面需要的模型变量
				methods:{ ... }, //所有事件处理函数和一些自定义函数
				created(){ ... }, //当new Vue()对象加载完自动执行
				watch:{ //定义监控变量的函数
					变量1(){//必须同名，只有同名的函数，才能监视同名的变量
						执行一切js或vue的操作
 					}
                }
             })

动态绑定CLASS
对象语法

	使用对象格式绑定
	<div class="static"  v-bind:class="{ active: isActive, 'text-danger': hasError }">/div>
	//
	data: {
      isActive: true,
      hasError: false
   }
   结果渲染为：
   <div class="static active"></div>
   //不必定义在内联样式模板中
   <div v-bind:class="classObject"></div>
   data: {
      classObject: {
        active: true,
        'text-danger': false
      }
   }
   https://vuejs.bootcss.com/guide/class-and-style.html

STYLE

	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    data: {
      activeColor: 'red',
      fontSize: 30
    }

    直接绑定到一个样式对象通常更好，这会让模板更清晰：
    <div v-bind:style="styleObject"></div>
    data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
     }
   }

watch和created有什么差别？

	答: created只在new Vue()对象创建完成后出发一次
		watch中的函数，只要变量变化，就会出发。反复变化多次，就自动触发多次。

什么时候用methods，computed，created，watch

13. 什么时候用methods，computed，created，watch
	答: 所有事件处理函数和根据主要自定义的函数，都放在methods中
		所有需要计算才能显示的属性，都放在computed中
		希望vue对象加载后自动执行的操作，放在created中
		希望实时监控一个变量的变化时，都放在watch中

在Vue中，computed属性会在以下几种情况下触发：

```初次访问computed属性时，computed属性会被执行，并且会缓存结果。
当computed属性依赖的响应式属性（如data中的某个属性）发生变化时，computed属性会重新计算。
当computed属性被绑定到模板中，并且computed属性所依赖的响应式属性发生变化时，computed属性会重新计算。