Vue 知识点

Vue el作用

提供Vue实例挂在的DOM元素 var app = new Vue({ el : '#app', data : { message : 'hello world' } })

Vue生命周期

created(): 这些均已初始化完成。props=>methods=>data=>computed=>watch mounted: 此时{{message}}数据已绑定。mounted只会执行一次 updated：更新后，多次执行 destroyed：实例已销毁

export default {} 和new Vue()区别

export default 的用法：相当于提供一个接口给外界 然而 new Vue({})部分， 只是创建一个Vue的实例 就是相当于创建一个根组件

export 和 export default 区别

export 导出的，import时需要加{}。 export default则不需要。 export 可有多个，export default只有一个

export function f(a) {
   return a+1
}
import { str, f } from 'demo1'

而：
export default {
    a: 'hello'    
}
import obj from 'demo1'

<template>
  <div>
    <div v-show="show">HelloWorld</div>
    <button @click="handleClick">Click</button>
  </div>
</template>

<script>
import {list} from '@/components/common.js'
export default {
  name: "test",
  data() {
    return {
      show: true
    };
  },
  created(){},
  methods: {
    handleClick: function() {
      list();
    }
  }
};
</script>

Vue.use(插件)发生了什么

通过use调用插件install方法，继而调用Vue.component(...)注册组件

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    /* istanbul ignore if */
    /*标识位检测该插件是否已经被安装*/
    if (plugin.installed) {
      return
    }
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      /*install执行插件安装*/
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    plugin.installed = true
    return this
  }
}

Vue.prototype.$test

在Vue原型上定义全局对象 每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。

this.$nextTick()

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新

Dialog 关闭后，清除tree的数据

<el-dialog @closed="handleClosed" />
handleClosed(){
    const that = this
    this.$nextTick(() => {
        that.$refs.tree.setCheckedKeys([]); //清除所有选中状态
    });
  },

element-ui 更新table中某行展开的子节点

 loadChildKey(tree, treeNode, resolve){ // 加载子节点信息
 	...
 	this.maps.set(data.number, { tree, treeNode, resolve })
 	...
 }
 
  const { tree, treeNode, resolve } = this.maps.get(this.modifyId)
  this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, this.modifyId, [])
  if (tree) {
    this.loadChildKey(tree, treeNode, resolve)
  }