1,computed和methods和watch的区别:
computed和watch都是他们监听或者依赖的对象的值发生变化才会调用,而methods则是每次页面刷新都会调用,因此从性能角度来看computed和watch比methods更高
computed和methods的语法简练,而watch则需要对每一个监听的对象都写一遍代码,因此,从语法简洁的层次来看,watch比不上computed
因此,综合来看,能用computed来写的方法就尽量用computed来写
2,父组件与子组件相互传值
父组件往子组件传值需要用到v-bind="value"的指令,这里其实就是通过属性去传值,value就是向子组件传递的值,同时这里有一个单向数据流的一个概念,就是父组件可以随意向子组件传值,但是子组件不能直接去修改父组件传过来的值,因为有可能父组件不只是向一个子组件传了这个值,在一个组件修改可能会导致其他组件的值也被修改了,所以如果一定要修改的话,需要将这个值赋给子组件自定义的data属性,然后通过修改data中的对象来修改数据
子组件向父组件传值则需要在子组件中使用this.$emit("event",data)来触发事件,同时在父组件中使用v-on:event="handleEvent",指令来监听子组件触发的事件,在methods中使用handleEvent(data)函数来处理这个事件,data是子组件传递的值,event是触发的时间名,这个可以自己定义
3,关于Vue实例挂载以及全局组件和局部组件
初始化一个实例的时候通常的写法是:
var vm = new Vue({
el: "#id",data:{},methods:{},computed:{}
})
el这个属性的值id就是这个实例所挂载的组件的id的值,相当于这个id的组件托管给了vm这个Vue实例
全局组件的写法:
Vue.component("name",{
template:"<HTML标签><HTML标签>"
})
局部组件:
var name = {
template:"<HTML标签><HTML标签>"
}
然后需要在Vue实例中:
var vm = new Vue({
el: "#id",data:{},methods:{},computed:{},
components:{
name:name
}
})
此时这个name组件就只能在vm所挂载的组件内使用了,其他id的组件是不能用name组件的
4,数组的增删
var list = [];
在数组最后去增加一个item的方法是list.push(item),而删除指定位置的item的方法是list.splice(index,1)
5,条件渲染和v-show指令
<div v-if="show"/>和<div v-show="show"/>,当show为false时,两个div都不会在页面显示,区别在于v-if指令的div在dom上也不会渲染,但v-show的div在dom上已经渲染完毕,只是将display属性设为了none,因此不显示,所以如果只是控制一个组件是否展示,那么用v-show的性能比v-if好,因为v-if会引发dom的增删机制
但是v-if可以搭配v-else和v-else-if指令来使用,从而可以控制自己想要展示哪些东西,但这里有一个问题在于Vue有一个复用机制,会去复用已经存在过的标签页,所以如果用v-if和v-else来控制刷新时可能会导致标签页内的内容背复用进来了,解决方法就是在标签页内加上一个key值,从而让Vue认定这个标签是独一无二不可复用的