1vue 常用特性

1vue 常用特性

1.1自定义指令

除了核心功能默认内置的指令，Vue 也允许注册自定义指令。有的情况下，对普通DOM元素进行

底层操作，这个时候就会用到自定义指令绑定到元素上执行相关操作。

自定义指令分为：

全局 指令和 局部 指令，当全局指令和局部指令同名时以局部指令为准。

自定义指令常用钩子函数有：

• bind：在指令第一次绑定到元素时调用

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

• update：数据更新时调用

请注意：不管在定义全局还是局部自定义指令时，所提及的指令名均是不带 v- 前缀的名称

全局自定义指令定义

// 无参(v-once/v-cloak)
Vue.directive('指令名',{ 
  钩子函数名: function(el[,....]){ 
  // 业务逻辑 
  // el参数是挂载到元素的DOM对象 
	} 
}
// 传参(v-text/v-html/v-model) v-model="username"
Vue.directive('指令名',{ 
  钩子函数名: function(el,binding[,....]){ 
  	let param = binding.value  // param 其实就时 username 的值
    // 业务逻辑
    },
    .... 
} 

局部自定义指令定义

可以在 new Vue 的时候添加 directives 以注册局部自定义指令，局部自定义指令只能在当前组件中使用：

directives: { 
  指令名: { 
    // 指令的定义 
    钩子函数名: function (el,binding) { 
      // 业务逻辑 
    } 
  } 
}

5.2 计算属性-computed

计算属性定义在Vue对象中，通过关键词 computed 属性对象中定义一个个函数，并返回一个值，使用计算属性时和 data 中的数据使用方式一致。

任何复杂的业务逻辑，我们都应当使用计算属性 - 计算属性具有依赖性，只有依赖的值发生改变，才会重新计算

5.3 监听器 - watch

使用watch来侦听data中数据的变化，watch中的属性一定是data 中已经存在的数据。

**使用场景：**数据变化时执行异步或开销比较大的操作。

**典型应用：**http://www.pinyinzi.cn/

computed 和 watch 区分使用场景

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

5.4 过滤器-filters

作用：格式化数据，比如将字符串格式化为首字母大写、将日期格式化为指定的格式等。

• 过滤器可以定义成全局过滤器和局部过滤器。
• 过滤器的本质就是一个方法，使用过滤器实际上就相当于方法调用，仅是书写形式上的差异(使用的时候需要用“|”，其也可以被称之为 管道 或 变量/数据修饰符 ）

声明语法：

// 全局过滤器 
Vue.filter('过滤器名称',function(value[,arg1,arg2...]){ 
  //过滤器业务逻辑 
  return .... 
})
// 局部过滤器 
el: '#app', 
data: {}, 
filters: { 
  过滤器名称: function(value[,arg1,arg2...]){ 
    return something 
  },
 .... 
}

使用语法：

<!-- 过滤器使用 -->
<div>{{msg | upper}}</div>
<!-- 过滤器允许连续使用，“前 → 后”按顺序执行 --> 
<div>{{msg | upper | lower}}</div> 
<!-- 过滤器支持在v-bind中使用 --> 
<div v-bind:id='id | formatId'></div> 
<!-- 过滤器支持传参 --> 
<div>{{msg | mysub(1,2)}}</div>

5.6 混入 - mixins

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

混入分为全局混入和局部混入。

注意事项

• 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，合并策略：

  • data 数据对象发生冲突时以组件数据优先

  • 同名钩子函数将合并为一个数组，都将被调用，并且混入对象的钩子将在组件自身钩子之前调用

  • 值为对象的选项，例如 methods 、 components 和 directives ，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

• 全局注册使用时需要格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例

5.7 生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。

Vue生命周期的主要阶段：4个before， 4个ed，创建，挂载，更新，销毁

• 挂载（初始化相关属性）

  • beforeCreate ---- 备孕

    注意点：在此时不能获取data中的数据，也就是说 this.msg 得到的是

  • created ---- 怀上了

  • beforeMount ---- 怀胎十月

  • mounted【页面加载完毕的时候就是此时】 ---- 生下来了

    注意点：默认情况下，在组件的生命周期中只会触发一次

• 更新（元素或组件的变更操作）

  • beforeUpdate

  • updated

    注意点：可以重复触发的

• 销毁（销毁相关属性）

  • beforeDestroy — game over前

  • destroyed — game over

销毁（手动）使用 this.$destroy()

关于8个生命周期涉及到的方法，可以参考Vue官网API：

https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90