vue基础知识（一）

使用vue一段时间，但对有些混乱的地方还不了解，在这里简单的进行一个记录，便于理解与归纳。

1.生命周期

beforeCreate

vue实例的挂载元素$el和数据对象data或者props都为undefined，还未初始化。

created

可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的

beforeMount

vue实例的$el和data都初始化了，创建虚拟的dom节点
补充：如果页面存在子组件，会在父组件的beforeMount之后去挂载子组件，当子组件挂载完成的时候才会去执行父组件的mounted

mounted

将VDOM 渲染为真实 DOM 并且渲染数据,vue实例挂载完成.

beforeUpdate

data更新时触发

updated

data更新时触发

beforeDestory

实例销毁之前调用。在这一步，实例仍然完全可用,适合移除事件、定时器等等

destroyed

组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

2.组件通信

父子组件通信

父组件通过props传递数据给子组件，子组件通过emit发送事件传递数据给父组件，从而实现父子组件通信。

父组件
<template><div><square :status="status" @emitColor="changeColor"></square></div>
</template>
export default {data(){return {status:1}},methods:{changeColor (val) {this.status = val} }}
复制代码

子组件
<template><div><div class="box"><div :class="status===1?'red':'blue'" @click="emitColor"></div><p>点击方块更换颜色</p></div></div>
</template>
export default {name: 'square',props: ['status'],methods:{emitColor () {this.$emit('emitColor', 2)},  }}
复制代码

3 computed和watch

computed

计算一个新的属性，不在data中定义，同时，它具有缓存性，只有当依赖发生改变时，才会计算新的值。

<template>
<div>计算总和是：{{sum}}</div>
<div>计算总和是：{{sum}}</div>
</template>
...
data() {return {x:10,y:20,}
},
computed:{sum: function() {console.log('计算属性')return this.x + this.y }
}
复制代码

在代码中，引用了2次{{sum}},但是打印结果只有2次而不是4次，说明在第二次使用{{sum}}时，使用的是之前的缓存值。

注：cumputed与方法比较

<template>
<div>计算总和是：{{sum()}}</div>
<div>计算总和是：{{sum()}}</div>
</template>
...
data() {return {x:10,y:20,}
},
methods:{sum(){return  return this.x + this.y }
}
}
复制代码

在代码中，引用了2次{{sum()}},但是打印4次，说明在第二次使用{{sum()}}时,重新进行了运算，不利于性能的优化。

watch

监听的是已经存在并且已经挂载vm上的数据，同时，它监听到值的变化就会执行回调。

<template>
</template>
...
data() {return {name: 'lucy',info: {height: '178cm',weight: '70kg',age: 20}}
},
//几种watch的用法
watch:{name: function(newValue,oldValue) {...   },info:{handler(newValue,oldValue){...},immediate: true,//立即执行deep:true,//深度监听},'info.age':{handler(newValue,oldValue){...},immediate: true,//立即执行deep:true,//深度监听}
}
}
复制代码

v-show 和 v-if

v-show被控制的元素只是在display:none和block之前切换，DOM元素是存在的；
v-if被操控的元素在渲染与不渲染之间进行切换