转换 / 监听 数据

• 对于已经创建的实例，Vue 不能动态添加根级别的响应式属性（即使用set也不行）。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
• Object.freeze(obj)会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

watch

• 同一个对象被反复给值监听对象，不能够触发监听

computed

• 在template中未绑定的话不会主动执行（即使关联数据改变），在方法中引用的话只在方法调用时调用。可以在watch中监听和在template绑定相同效果，当关联数据改变时自动触发，并触发watch监听
• 计算属性定义时的函数将作为该属性的 getter 函数。计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

• 不能在data中引用，例如

data(){
    return{
        czb:this.czb2
    }
},
computed:{
    czb2(){
        return ...
    }
}

filters

• 不能使用this
• 可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

• 在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

• Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：（不能用于v-modle）

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

• 过滤器可以串联：filterA 的结果传递到 filterB 中，过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。

{{ message | filterA | filterB }}

• 过滤器是 JavaScript 函数，因此可以接收参数：filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

{{ message | filterA('arg1', arg2) }}

Vue.mixin / mixins

• 混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
• 数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。
• 同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

• 值为对象的选项，例如 methods, components 和 directives（组件内自定义v指令），将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
• 也可以全局注册混入对象。谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

• 自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

// 对于大多数对象选项，可以使用 methods 的合并策略：（对象一层覆盖）
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods // Vue.config.optionMergeStrategies包含了vue下原有的属性的规则

// Vue.config.optionMergeStrategies下各个选项返回的实际是个混入方法函数，比如使用计算属性的混入规则来创造自定义混入规则
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}

vm.$watch

• 可以监听实例下的属性，不一定是data或计算属性

vnode.componentInstance是vue实例，这里监听store.states.expandRows，store.states.expandRows为一个数组，是饿了吗表格展开效果时，展开内容实际添加的位置。
?vnode.componentInstance好像返回undefined如何实现绑定？

vnode.componentInstance.$watch('store.states.expandRows', function (val) {
    setHeight(el)
})

• 可以监听一个函数的返回值

this.$watch(() => {
    return this.$store.getters['maskLoading/czbMaskLoading']
}, (val) => {
    debugger
})

Vue.set( target, key, value ) / vm.$set( target, key, value )

• 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性，比如 this.myObject.newProperty = 'hi'
• 返回值：设置的值

this.$set(this.deataiFromData, element.parameterName, '')