vue计算属性和侦听属性

Vue2.0基础

计算属性和侦听属性

计算属性 computed

侦听属性 watch

深度监视

• vue中的watch默认不监测对象内部值的改变（一层）
• 配置deep:true，可以监测对象内部值的改变（多层）

备注：

• vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
• 使用watch时根据数据的具体解构，决定是否采用深度监视

computed和watch区别

1. computed能完成的，watch一定能完成
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

注意：

• 所有被vue管理的函数（methods，computed,watch函数），最好写成普通函数，这样this的指向才是vm或组件实例对象
• 所有不被Vue所管理的函数（定时器回调函数、ajax回调函数、Promise回调函数），写成箭头函数，这样this的指向才是vm或组件实例对象

样式绑定

style绑定

:style="{color:activeColor,fontSize:fontSize+'px'}"

其中 activeColor/fontSize 是 data 属性

class绑定

1. :class="xxx"
2. 表达式是字符串：“classA”
3. 表达式是对象：{classA:isA,classB:isB}
4. 表达式是数组：['classA','classB']

自定义指令

vue过滤器

mixin混入

组件注册与通信

• 父子传值props

• 子父传值 $emit

• 父组件获取子组件属性

  this.$refs

• 子组件获取父组件的属性和方法

  //获取父组件方法
  this.$parent.methods
  
  //获取父组件属性
  this.$parents.options

动态组件

动态组件概念

动态组件使用

keep-alive的使用

slot插槽

具名插槽

作用域插槽