Vue应注意的细节问题

Vue应注意的细节

• 只有当Vue实例被创建时，data中存在的属性才是响应的
• 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

侦听器

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

class与style绑定

class绑定的强大模式：

• 利用class绑定Object到computed中

条件判断

• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

组件

• 组件在注册之后，便可以作为自定义元素 在一个实例的模板中使用。注意确保在初始化根实例之前注册组件：
• 在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息
• 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
• 子组件与父组件通信

生命周期钩子详情

        var vm = new Vue({
            el: "#app",
            data: { // function
                number: 1,
                isButtonDisabled: null
            },
            // init events & lifecycle
            // 适合做loading加载
            beforeCreate: function () {
                console.log('----beforeCreate----' + this.number);
                console.log('beforeCreate: ', document.getElementsByTagName('span')[0])
            },
            // injections & reactivity, data值注入。
            // 适合异步获取数据，
            created: function () {
                console.log('----created----' + this.number);
                console.log('created: ', document.getElementsByTagName('span')[0])
            },
            // 
            beforeMount: function () {
                console.log('----beforeMount----' + this.number);
                console.log('beforeMount: ', document.getElementsByTagName('span')[0])
            },
            // dom加载完成，适合操作dom
            mounted: function () {
                console.log('----mounted----' + this.number);
                console.log('mounted: ', document.getElementsByTagName('span')[0]);
            },
            // 数据已经更新完成
            beforeUpdate: function () {
                console.log('======beforeUpdate=======' + this.number)
            },
            updated: function () {
                console.log('======updated=======' + this.number)
            },
            methods: {
                add: function () {
                    this.number++;
                },
                update: function () {
                    this.number = 30;
                    // dom未更新
                    this.$nextTick(function () {
                        // dom更新了
                    })
                }
            },
            watch: {
                number() {
                    console.log(this.number);
                }
            }
        });

多个全局filter的引入方式

• 循环注册filter

// filters.js
let capitalize = value => {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
}
export {capitalize}

// main.js
import as * filters from './common/js/filters'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

• 在单独filters.js

// filters.js
import Vue from 'vue'
Vue.filter('capitalize', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  })

// main.js
import './common/js/filters'

混入 (mixins)

定义公共的方法和计算属性，方便不同page调用

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

注意：

1. 在和组件的数据发生冲突时以组件数据优先。
2. 混入对象的钩子将在组件自身钩子之前调用。
3. 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
4. 慎用全局混入

Vue页面的内存泄漏

未完待续