03-vue的学习

1、Ref 获取dom元素

<input ref="inputValue" />

this.$refs.inputValue

this.$refs.inputValue.focus()  // 获取元素dom，聚焦

2、计算属性 computed

computed:计算属性，通常是根据已有的数据，计算出新的数据
例子：

// 示例：
computed: { // 计算属性，通常是根据已有的数据，计算出新数据
    completedTodos() { // 计算已完成的待办事项
        return this.todos.filter(todo => todo.completed)
    },
    unCompletedTodos() {
        return this.todos.filter(todo => !todo.completed)
    }
}

• 计算属性是基于它们的依赖进行缓存的。
• 计算属性只有在它的相关依赖发生改变时才会重新求值

3、Mixins

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。 混入对象可以包含任意组件选项。 当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

4、侦听属性watch

监听一个数据的变化，由一个数据的变化导致其它一个或多个数据的变化或导致其它副作用。

watch:{
	Data: function(n,o){ // Data监听的数据
		this.init() // 执行的函数
	}
}

5、过滤器filter

• 全局 Vue.filter(name, handler)
• 局部 { filters: { name: (val) => { return '' } } }

使用

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

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

注：watch 与 computed 的区别：
watch:

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

computed:

1.不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4.当一个属性发生变化时，需要执行对应的操作；一对多；
5.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

• immediate：组件加载立即触发回调函数执行
• deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。