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" }
}
})
注意:
- 在和组件的数据发生冲突时以组件数据优先。
- 混入对象的钩子将在组件自身钩子之前调用。
- 值为对象的选项,例如 methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
- 慎用全局混入
Vue页面的内存泄漏
未完待续