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发送事件传递数据给父组件，从而实现父子组件通信。

父组件
    export default { data(){     return {         status:1     } }, methods:{     changeColor (val) {      this.status = val    }  } }复制代码

子组件
    export default {  name: 'square',  props: ['status'],  methods:{     emitColor () {      this.$emit('emitColor', 2)    },    } }复制代码

3 computed和watch

computed

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


    ...data() {    return {      x:10,      y:20,    }},computed:{   sum: function() {      console.log('计算属性')      return this.x + this.y    } }复制代码

在代码中，引用了2次{

{sum}},但是打印结果只有2次而不是4次，说明在第二次使用{

{sum}}时，使用的是之前的缓存值。

注：cumputed与方法比较


    ...data() {   return {     x:10,     y:20,   }},methods:{   sum(){     return  return this.x + this.y    }}}复制代码

在代码中，引用了2次{

{sum()}},但是打印4次，说明在第二次使用{

{sum()}}时,重新进行了运算，不利于性能的优化。

watch

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


    ...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被操控的元素在渲染与不渲染之间进行切换