VUE基础知识

Vue组件存在的缺点

1、全局定义：每个组件的命名不可重复
2、字符串模板：缺乏语法高亮，可读性较差

vue组件的三大核心概念：属性、事件、插槽

（1）属性

• 自定义属性：在组件props中声明的变量
• 原生属性：没有声明的属性，默认自动挂载
• 特殊属性class、style、ref、key：挂载到组件根元素上，支持字符串、对象、数组等多种语法。最终均会生成字符串挂载到DOM元素上。

属性书写方式

• 1、数组罗列的方法，对系统后续维护不利

props:["type","name",...]

• 2、通过对象的模式，给出类型，自定义校验以及默认值。

list:{
	type:Boolean,
	default:false
}

属性时单向数据流，不可在子组件更改父组件传递的值，可通过onChange方法修改。

（2）事件

• 1、普通事件：一般的@click input change……等事件，在子组件中通过this.$emit(“XXX”)触发。
• 2、修饰符事件：@input.trim @click.stop（阻止冒泡） submit.prevent等，用于原生的HTML元素

（3）插槽

插槽是组件的一块HTML模板，其显示与否由父组件决定。

• 1、通过slot 的形式加载父组件传递过来的组件
• 2、作用域插槽

//父组件
<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>
  </div>
</template>

//子组件
<template>
  <div class="child">
    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['1','2','3','3','4','5']
      }
    }
}

通过父组件传递给子组件的内容，让子组件去执行相应的行为。

双向绑定和单向数据流

• 1、双向绑定：model与view的相互更新（语法糖）
• 2、单向数据流：model更新触发view的更新

虚拟DOM

同层比较的机制，同一层级的一组节点可以使用唯一的id进行区分。

当页面数据发生改变的时候，如果节点类型不同，则直接删掉前面的节点，创建并插入新的节点，如果节点类型相同，则重新设置相应的属性，进行节点的更新。

key属性的引用（相同节点的移动，key的存在使得节点可以移动而不用删除）

组件更新

• 1、vue实例化时会对data下的数据进行getter，setter转化，组件render时，会通知watcher进行更新。
• 2、计算属性：减少模板中的计算逻辑，数据缓存，依赖响应式数据类型。

当数据有变化时才会触发计算属性computed，相对方法性能较好。

侦听器watch
尽量使用计算属性完成。

生命周期

• 1、创建阶段
  beforeCreate：初始化事件和生命周期
  created：数据监测，属性和侦听器配置
  beforeMount：模板编译到render
  render
  mounted：异步请求，操作DOM（this.$nextTick）
• 2、更新阶段
  数据变化或强制更新 - beforeUpdate -移除已经添加的事件监听器 - render - updated （不可更改依赖数据）
• 3、销毁阶段
  beforeDestory - 移除已经添加的事件监听器

指令

	v-text
	v-html
	v-show
	v-if v-else-if v-else
	v-for
	v-bind（：）
	v-on（@）
	v-model
	v-pre：绕过`{{}}`编译直接输出字符串
	v-once：绑定的变量只会解析一次
	v-cloak