Vue框架学习

Vue2框架官网文档
Vue3框架官网文档

Vue 原理

vue响应式原理：通过 Object.defineProperty() 定义setter方法和getter方法实现数据劫持，设置一个监听器用于监听所有属性的变化，当数据发生改变时，监听器就会触发更新函数做相应的操作。

Diff算法：通过比较同层节点找出不同，使用优先判断和就地复用策略，提高diff算法效率。

生命周期

生命周期一共有八个钩子函数

• 数据创建前 beforecreate
• 数据完成创建 created
• 页面渲染前 beforemount
• 页面完成渲染 mounted
• 组件更新前 beforeUpdate
• 组件完成更新 updated
• 组件销毁前 beforeDestroy
• 组件完成更新 destroyed

vue中的周期函数不能使用箭头函数，箭头函数没有this，this作为变量向上级词法作用域查找，会报空值错误

页面渲染

• v-if, v-else 设置此标签是否被渲染
• v-show 设置标签是否显示
• v-for 循环输出内容，key值可为每个item绑定一个标识
• v-model 数据双向绑定，即数据和页面渲染同时进行
• v-bind 绑定属性，简写为 ‘:’
• v-on 绑定事件，简写为 ‘@’

<template>
    <div v-if="true">content</div>
    <div v-else>none</div>
    <div v-show="true">content</div>
    <div v-for="(item, index) in list" :key="index">
        {{item}}
    </div>
    <div v-model="num">{{ num }}</div>
    <div :class="red" :style="color">title</div>
    <button @click="function">按钮</button>
</template>
<script>
export default {}
</script>
<style></style>

内置对象

• props 数据传输对象，用于接收父组件传来的数据

props是个单项数据流，父组件发生变更时，子组件的props都会刷新子组件修改props中的对象或数组会影响到父组件的状态

• data 当前组件的全局数据

data()必须是一个函数，并且返回一个对象，vue在创建组件实例的过程中会调用此函数，如果data不是一个函数，不同组件在修改data的值时会受到影响。

• components 组件映射对象
• methods 组件的所有函数方法都可在此对象中申明
• computed 计算属性，必须有返回值

计算属性(computed)是基于它们的响应式来进行缓存的，只有值发生变化才会重新调用。
计算属性默认只有getter方法get()，可以在里面添加setter方法set()来传值进去。

• watch 放置监听函数的对象

export default {
	props: {},
	data() { return{} },
	components: {},
	methods: {},
	computed: {},
	watch: {}
}

插槽slot

插槽类似于模板属性的补充，在子组件中设置插槽标签，父组件间继承子组件后，可在标签内插入新的标签属性

• 匿名插槽：未命名插槽，父组件引入子组建后直接编写新的新签属性
• 具名插槽：父组件使用子组件插槽时需要绑定插槽名，即：slot="name"

注：在父组件中不能直接访问到子组件中的数据。

parent.vue

<template>
  <div class="parent">
    <child>
      <div slot="header">头部</div>
      <div #header>插槽缩写</div>
      <div>未命名部分</div>
      <div slot="footer">尾部</div>
    </child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  components: { child }
}
</script>

child.vue

<template>
  <div class="container">
    <header>
      <h2>具名插槽</h2>
      <slot name="header"></slot>
    </header>
    <main>
      <h2>匿名插槽</h2>
      <slot></slot>
    </main>
    <footer>
      <h2>具名插槽</h2>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

作用域插槽：在子组件 slot 中绑定一个数据，父组件通过 slotProps 可访问到子组件的数据

<!-- parent.vue -->
<child slot="{item}">
	 <template v-slot="slotProps">
	   <span>{{slotProps.item}}</span>
	 </template>
	 <!-- 或者使用ES6解构插槽 -->
	 <template v-slot="{item}">
	 	<span>{{item}}</span>
	 </template>
</child>

child.vue

<div class="container">
    <slot :item="item"></slot>
</div>
<script>
export default {
  data() {
    return { item: '1' }
  }
}
</script>