vue笔记细节

计算属性和监听 

computed:

1.支持缓存，依赖数据项发生变化，才会重新计算 

2. 不支持异步，无法监听异步数据变化

watch:

1. 不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4.immedida：确认是否以当前的初始值执行handler的函数。

5.deep：是否深入监听

Vue.set()和this.$set()方法

1.用于改变data添加数据，只能添加data下面的对象数据，对data不起作用。

2.添加的数据会成为响应式数据。

data里面数组的值用索引值不能被Vue所发现，只能改变其数组才可以。

v-for中key的作用

1.key设置为index会导致效率很低，同时改变顺序会导致出错。

2.key最好设置数组的唯一值，效率高，转化为虚拟dom的时候直接从缓存里面拿到。

使用v-model注意

不能能使用props的值直接使用，因为props不可直接修改

 组件间通信几种方式

1.函数类型的props传值

//父组件
<template>
	<Children :getChildName="getChildNameFunction" />
</tempalte>
<script>
export default {
	name:"Father",
	data(){
		return{}
	},
	methods:{
		getChildNameFunction(name){
                    console.log("父组件接受到Children的名字",name)
		}
	}
}
</script> 

//子组件
<template>
	<div>
		<button @click="sendChildName">prop向父组件传值</button>
	</div>
</tempalte>
<script>
export default {
	name:"Children",
	props:["getChildName"],
	data(){
		return{
			name:"阵雨"
		}
	},
	methods:{
		sendChildName(){
			this.getChildName(this.name)		
                }
	}
}
</script> 

2.通过自定义事件传值

//父组件中
<Student @getStudent="getStudentName" /> 
method:{
	getStudentName(){
		console.log("父组件接受到Student的名字",name)
	}
}


//子组件中
<template>
	<button @click="sendStudentName">把Student名字给父组件</button>
</tempalte>

<script>
export default {
data(){
	reutrn{
		name:"阵雨"
	}
},
method:{
        sendStudentName(){
            this.$emit("getStudent",this.name)
        }
    }
} 

3.通过ref属性为子组件绑定事件

//父组件中
<Student ref="student" />
<script>
export default {
mounted(){
	this.$refs.student.$on('getStudent',this.sendStudentNameFunction)
},
method:{
	sendStudentNameFunction(name){		
            console.log("父组件接受到Student的名字",name)
	}
    }
}
</script> 

//子组件中
<template>
	<button @click="sendStudentName">把Student名字给父组件</button>
</tempalte>

<script>
export default {
data(){
	reutrn{
		name:"阵雨"
	}
},
method:{
        sendStudentName(){
            this.$emit("getStudent",this.name)
        }
    }
} 

4.全局时间总线-任意组件间通信

main.js

new Vue({ 
         el: '#app',  
         render: h => h(App), 
         beforeCreate() {    
            Vue.prototype.$bus = this //在原型上创建一个方法指向这个vm对象  
         }
})

App.vue

<template>    
    <div>        
        <School/> <!-- 子组件一-->       
         <Student/> <!-- 子组件二-->    
    </div>
</template>
<script>
import School from './components/School.vue'import Student from './components/Student.vue'
export default {   
     name: 'App',        
     components:{       
            School,        
            Student    
     },    
     methods:{}
}

School.Vue

export default {    
    name:'SchoolMat',    
    data() {        
        return {            
            name: '北京大学'        
        }    
    },   
    mounted(){         
            this.$bus.$on('getStudentName',(data)=>{           
                console.log('我收到了name',data)
            })    
    },   
    //注意事项
    beforeDestroy(){        this.$bus.$off('getStudentName')    }
}

Student.Vue

<template>   
     <div>        
        <span>姓名{{ name }}</span>       
        <button @click="tapClick()">点击把姓名传给学校</button>    
    </div>
</template>
export default {    
    name: 'StudentMat',    
    data() {        
           return {            
                name: '阵雨'        
           }    
    },   
    methods:{       
         tapClick(){            
            this.$bus.$emit('getStudentName',this.name)        
         }    
    }
}

重点 第三种方式绑定方法的时候，在生命周期结束的时候记得销毁。

kee-alive缓存组件的时候，想要更新组件的方法可以使用activated（）{}生命周期