Vue实用方法与技巧探索

1. Vue对象的完整成员
   var vm = new Vue({
   // 数据
   data: “声明需要响应式绑定的数据对象”,
   props: “接收来自父组件的数据”,
   propsData: “创建实例时手动传递props，方便测试props”,
   computed: “计算属性”,
   methods: “定义可以通过vm对象访问的方法”,
   watch: “Vue实例化时会调用$watch()方法遍历watch对象的每个属性”, // DOM el: “将页面上已存在的DOM元素作为Vue实例的挂载目标”, template: “可以替换挂载元素的字符串模板”, render: “渲染函数，字符串模板的替代方案”, renderError: “仅用于开发环境，在render()出现错误时，提供另外的渲染输出”, // 生命周期钩子 beforeCreate: “发生在Vue实例初始化之后，data observer和event/watcher事件被配置之前”, created: “发生在Vue实例初始化以及data observer和event/watcher事件被配置之后”, beforeMount: “挂载开始之前被调用，此时render()首次被调用”, mounted: “el被新建的vm.$el替换，并挂载到实例上之后调用”,
   beforeUpdate: “数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前”,
   updated: “数据更改导致虚拟DOM重新渲染和打补丁之后被调用”,
   activated: “keep-alive组件激活时调用”,
   deactivated: “keep-alive组件停用时调用”,
   beforeDestroy: “实例销毁之前调用，Vue实例依然可用”,
   destroyed: “Vue实例销毁后调用，事件监听和子实例全部被移除，释放系统资源”,
   // 资源
   directives: “包含Vue实例可用指令的哈希表”,
   filters: “包含Vue实例可用过滤器的哈希表”,
   components: “包含Vue实例可用组件的哈希表”,
   // 组合
   parent: “指定当前实例的父实例，子实例用this.$parent访问父实例，父实例通过$children数组访问子实例”,
   mixins: “将属性混入Vue实例对象，并在Vue自身实例对象的属性被调用之前得到执行”,
   extends: “用于声明继承另一个组件，从而无需使用Vue.extend，便于扩展单文件组件”,
   provide&inject: “2个属性需要一起使用，用来向所有子组件注入依赖，类似于React的Context”,
   // 其它
   name: “允许组件递归调用自身，便于调试时显示更加友好的警告信息”,
   delimiters: “改变模板字符串的风格，默认为{{}}”,
   functional: “让组件无状态(没有data)和无实例(没有this上下文)”,
   model: “允许自定义组件使用v-model时定制prop和event”,
   inheritAttrs: “默认情况下，父作用域的非props属性绑定会应用在子组件的根元素上。当编写嵌套有其它组件或元素的组件时，可以将该属性设置为false关闭这些默认行为”,
   comments: “设为true时会保留并且渲染模板中的HTML注释”
   });

2. Vue中watch的高级用法
   （1）监听$route

               使用场景：当两个路由指向同一个组件是，修改路由视图并未更新，第二个组件的created未执行，这时需要监听$route
   
               eg:  
   

created () {
console.log(this.getStatus(this.$route.path)) }, methods: { getStatus (urlStr) { var urlStrArr = urlStr.split(‘/’) return urlStrArr[urlStrArr.length - 1] } }, watch: { ‘$route’ (to, from) {
console.log(this.getStatus(this.$route.path))
}
}

           (2)  watch默认在数据第一次修改时开始监听，对对象的内部的属性监听不到，只能监听对象的引用。

      使用场景：1.组件要求第一次修改之前就开始监听 2. 深度去监听对象的属性。
                  eg:

data() {
return {
fullName: ”,
firstName: ”,
lastName: ”,
obj: {
name: ‘huoalong’
}
}
},
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + this.lastName;
},
immediate: true //在第一次修改之前开始监听，
deep: true, //深度监听对象内部的属性
}
}
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler,如果我们明确要观察哪个属性时可以这样做

watch: {
‘obj.name’: {
handler(newName, oldName) {
this.fullName = newName + this.lastName;
},
immediate: true //在第一次修改之前开始监听
}
}
(3) 通过组件的属性props设置一个动态变化的值时需要用到watch

                场景：父子组件通过props传动态值时，需要在子组件data里面重新定义一个变量对象来盛放props，然后用watch监听。

父组件