计算属性
计算属性只有在它的相关依赖发生改变时才会重新求值，计算属性是基于它们的依赖进行缓存的
//对比计算属性和watch
computed: {
a:function () {
//计算属性的getter和setter
get:function(){
return b + c; //当b或者c改变的时候，就会重新计算a的值
},
set:function(){
return b + c; //当a的值被改变的时候，会执行里面的函数
}
}
},
watch:{
a:function(){
// 当a改变的时候就执行相应的方法
}
}
数组和对象更新
数组更新：push(),shift(),splice(),sort(),reverse()数组执行这些方法后可以重新渲染页面数据。
注意：利用索引设置数组，无法重新渲染双向绑定的页面数据。可以使用Vue.set(arr/obj,index/key,newValue)来设置数组或者对象的更新
组件
Vue.component('example', {
props: { // 或者props[a,b,c]
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true,
default: 100
},
}
})
父子组件通信：
//一般定义组件用.vue文件
//定义一个template也可以用以下方式
var temp = {
template:''
}
slot
动态组件
//如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染，可以在外层包裹一个keep-alive
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ }
}
})
子组件索引
异步更新队列
Vue.nextTick(callback) 。回调函数在 DOM 更新完成后就会调用
过度效果
只有v-if、v-show、动态组件可以让元素的过度有过度效果。
hello
//动画结束状态
.name-enter-active, .name-leave-active {
transition: opacity .5s
}
//初始状态
.name-enter, .name-leave {
opacity: 0
}
自定义指令
//全局自定义一个自动获取焦点的指令
Vue.directive('focus',{
//当绑定元素插入到DOM中
inserted:function(el){
el.focus();
//dosomething;
},
//指令第一次绑定时调用
bind:function(){},
})
//局部注册
new Vue({
directive:{
//改变颜色
colorSwitch:{
inserted:function(el,binding){
el.style.backgroundColor = binding.value;
}
}
}
})
其中钩子函数中的参数：
- el：指令所绑定的元素，可以用来直接操作dom
- binding：指令对象
{name:指令名,value:指令的绑定值}
mixin
概念：[mixin][]类似于给一个[对象A][]定义一些通用的方法或者是钩子函数的操作内容，然后把这个对象通过[mixin][]混合进入一个[vue对象][]的实例，使该[vue对象][]拥有[对象A][]的所有方法。
合并：当[对象A][]和[vue对象][]有[同名方法][]或者是[同名钩子函数][]时，方法将会被合并，先执行[对象A][]的内容。
//定义一个局部mixin
var A = {
created:function(){},
methods:{
hello:function(){}
}
}
new Vue({
mixins:[A]
})
//或者是直接定义一个全局mixin
Vue.mixin({
created:function(){}
})
插件
vue的插件应该有一个公开的方法[install][]，这个方法的第一个参数是[全局Vue][]，第二个参数是[参数options][]对象。
//定义插件
const loading = {
install:function(Vue,options){
//可以通过全局mixin添加一些组件，或者是添加一些全局方法
}
}
//使用插件
Vue.use(loading);
render
new Vue({
// h其实是createElement
render:(h) => h(App)
})