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