vue基础（一）：自定义全局组件、计算属性、侦听器、v-if与v-show、$event

1，自定义全局组件：use，组件提供install方法。

// template.js
import Temp from 'temp.vue'
export default {
    install: function(Vue){
        Vue.component('template-name', Temp)
    }  
}    
//main.js
import Temp from 'template.js'
Vue.use(Temp)

 2，计算属性&侦听器

　　a，计算属性VS函数：是基于它们的响应式依赖进行缓存的。只在相关响应式 依赖 发生改变时它们才会重新求值。而不必再次执行函数。

// {{ msg() }} -  {{ msg }}
computed: {
    msg: function() {
        return this.num ++ 
    }
 },
methods: {
　　msg: function() {
　　　　return this.num ++
  }
}

　　b,侦听属性 watch：与计算属性不同，需要在data定义。当数据发生变化时，触发。不能return值。

　　watch属性：deep，immediate: 该回调将会在侦听开始之后被立即调用, handler。

watch: {
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true   //深度监听
    }    
}

 

　　 侦听器通常用在数据发生变化有异步操作 或 开销较大时。

3，v-if 与 v-show 的区别

　　v-if：Vue 会尽可能高效地渲染元素，在切换过程中，通常会复用已有元素而不是从头开始渲染。如果需要区分开，加key。

　　v-if:  当为false时，不渲染组件。  控制组件

　　v-show: 通过display: block;来控制，会渲染组件。   控制标签

4, e 事件对象传递: $event

<span @click="test_1"></span>
<span @click="test_2('2', $event)"></span>