scoped原理

vue组件scoped样式都会在选择器的最后加上data-v-属性

data为什么是一个函数

避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例，如果 data 是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过 data 函数返回一个对象作为组件的状态

computed，watch，method

computed：默认computed也是一个watcher具备缓存，只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据，使用 computed

watch：每次都需要执行函数。 watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情，使用watch。

method：只要把方法用到模板上了,每次一变化就会重新渲染视图，性能开销大

组件之间的通信

• 父子间通信:父亲提供数据通过属性 props传给儿子；儿子通过 $on 绑父亲的事件，再通过 $emit 触发自己的事件（发布订阅）

子传父
<div id="app">
        <my-comp1 @xxx="foo2"></my-comp1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let MyComp1 = {
            template:`<h1 @click="foo1">子组件</h1>`,
            methods:{
                foo1(){
                    // 1.子组件发'xxx'消息
                    // this.$emit('xxx')
                    this.$emit('xxx', 'hate')
                }
            },
            mounted(){
                // 2.当接收到'xxx'消息时,执行指定函数
                this.$on('xxx',()=>{
                    console.log('子组件接收到xxx消息,执行相应代码')
                })
            }
        }
        let vm = new Vue({
            el:'#app',
            components:{
                MyComp1
            },
            methods:{
                foo2(val){
                    console.log('父组件接收到xxx消息:'+val)
                }
            }
        })
    </script>

• 利用父子关系 $parent 、 $children ， 创建一个单独的js文件event.js,内容如下：

兄弟传值
const install = function (Vue) {
  const EventBus = new Vue({
    methods: {
      emit(event, ...args) {
        this.$emit(event, ...args)
      },
      on(event, callback) {
        this.$on(event, callback)
      },
      off(event, callback) {
        this.$off(event, callback)
      }
    }
  })
  if (typeof window !== 'undefined') {
    window.$bus = EventBus
  }
  Vue.prototype.$bus = EventBus
}
export default install

子组件a里面触发一个事件：

handleClick(msg) {
      this.$bus.$emit('assetTypeCodeChange', msg)
    },

子组件b 接受这个事件，并在组件销毁时移除事件：

created() {
    this.$bus.$on('assetTypeCodeChange', code => {
      console.log(code)
    })
  },
  beforeDestroy() {
    this.$bus.$off('assetTypeCodeChange')
  },

获取父子组件实例的方法。

• 父组件提供数据，子组件注入。 provide 、 inject ，插件用得多。
• ref 获取组件实例，调用组件的属性、方法
• 跨组件通信 Event Bus （Vue.prototype.bus=newVue）其实基于bus = new Vue）其实基于bus=newVue）其实基于on与$emit
• vuex 状态管理实现通信