Vue3笔记总结

# 一、为什么选择CompositionAPI

# Vue2的局限性

组件逻辑膨胀导致的可读性变差
无法跨组件重用代码
Vue2对TS的支持有限

在传统的OptionsAPI中我们需要将逻辑分散到以下六个部分

OptionsAPI

components
props
data
computed
methods
lifecycle methods

# 如何使用CompositionAPI解决问题

最佳的解决方法是将逻辑聚合就可以很好的代码可读性。

这就是我们的CompositionAPI语法能够实现的功能。CompositionAPI是一个完全可选的语法与原来的OptionAPI并没有冲突之处。他可以让我们将相同功能的代码组织在一起，而不需要散落到optionsAPI的各个角落

# 代码重用方法PK

Vue2中的跨组件重用代码，我们大概会有四个选择

Mixin - 混入

代码混入其实就是设计模式中的混合模式，缺点也非常明显。
可以理解为多重继承，简单的说就是一个人如何有两个父亲

缺点

无法避免属性名冲突
继承关系不清晰

Mixin Factory - 混入工厂

返回一个

✅代码重用方便

✅继承关系清洗

ScopeSlots - 作用域插槽

❌可读性不高

❌配置复杂 - 需要再模板中进行配置

❌性能低 - 每个插槽相当于一个实例

CompositionApi - 复合API

✅代码量少

✅没有引入新的语法，只是单纯函数

✅异常灵活

✅工具语法提示友好 - 因为是单纯函数所以很容易实现语法提示、自动补偿

# 二、setup & ref

# 使用CompositionAPI理由

✅更好的Typescript支持

✅在复杂功能组件中可以实现根据特性组织代码 - 代码内聚性👍 比如：排序和搜索逻辑内聚

✅组件间代码复用

# setup是什么

在以下方法前执行：
- Components
- Props
- Data
- Methods
- Computed Properties
- Lifecycle methods
可以不在使用难于理解的this
有两个可选参数
- props - 属性 (响应式对象且可以监听(watch))

import {watch} from "vue"
export defalut {
	props: {
		name: String
	},
	setup(props) {
		watch(() => {
			console.log(props.name)
		})
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

context 上下文对象 - 用于代替以前的this方法可以访问的属性

setup (props,context) {
	const {attrs,slots,parent,root,emit} = context
}

@前端进阶之旅: 代码已经复制到剪贴板

# ref是什么

对基本数据类型数据进行装箱操作使得成为一个响应式对象，可以跟踪数据变化。

# 总结

可维护性明显提高

可以控制哪些变量暴露
可以跟中哪些属性被定义（属性继承与引用透明）

# 三、Methods

# 基础用法

# 自动拆装箱总结

JS ：需要通过.value访问包装对象
模板: 自动拆箱

# 四、 Computed - 计算属性

这个地方实在没什么好讲的，和Vue2没变化

<template>
  <div>
    <div>Capacity： {{ capacity }}</div>
    <p>Spases Left: {{ sapcesLeft }} out of {{ capacity }}</p>
    <button @click="increaseCapacity()">Increase Capacity</button>
  </div>
</template>

<script>

import { ref, computed, watch } from "vue";
export default {
  setup(props, context) {
    const capacity = ref(3);
    const attending = ref(["Tim", "Bob", "Joe"]);
    function increaseCapacity() {
      capacity.value++;
    }
    const sapcesLeft = computed(() => {
      return capacity.value - attending.value.length;
    });
    return { capacity, increaseCapacity, attending, sapcesLeft };
  },
};
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 五、Reactive - 响应式语法

之前reactive 的 Ref 去声明所有的响应式属性

import { ref,computed } from 'vue'
export default {
  setup(){
    const capacity = ref(4);
    const attending = ref(["Tim","Bob","Joe"]);
    const spacesLeft = computed(()=>{
      return capacity.value - attending.value.length
    })
    function increaseCapacity(){ capacity.value ++;}
    return { capacity,increaseCapacity,attending,spacesLeft}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

但是有另一个等效的方法用它去代替 reactive 的Ref

import { reactive,computed } from 'vue'
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

过去我们用vue2.0的data来声明响应式对象,但是现在在这里每一个属性都是响应式的包括computed 计算属性

这2种方式相比于第一种没有使用.

接下来我们再声明method 这2种语法都ok，取决于你选择哪一种

setup(){
  const event = reactive(){
    capacity:4,
    attending:["Tim","Bob","Joe"],
    spacesLeft:computed(()=>{
      return event.capacity - event.attending.length;
    })
    function increaseCapacity(){event.capacity++}
    //return整个对象
    return {event,increaseCapacity}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

<p>Spaces Left:{{event.spacesLeft}} out of {{event.capacity}}</p>
<h2>Attending</h2>
<ul>>
	<li v-for="(name,index) in event.attending" :key="index">
     {{name}}
  </li>
</ul>
<button @click="increaseCapacity()"> Increase Capacity</button>

@前端进阶之旅: 代码已经复制到剪贴板

在这里我们使用对象都是.属性的方式，但是如果这个结构变化了，event分开了编程了一个个片段，这个时候就不能用.属性的方式了

//在这里可以使用toRefs
import {reactive,computed,toRefs} from 'vue'
export default{
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity -event.attending.length;
        
      })
    })
    function increaseCapacity(){ event.capacity ++ }
    return {...toRefs(event),increaseCapacity}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

如果没有 increaseCapacity() 这个方法直接可以简化为

return toRefs(event)

@前端进阶之旅: 代码已经复制到剪贴板

完整代码

<div>
   <p>Space Left : {{event.spacesLeft}} out of {{event.capacity}} </p>
   <h2>Attending</h2>
   <ul>
      <li v-for="(name,index)" in event.attending :key="index">{{name}}
      </li>


     
   </ul>
   <button @click="increaseCapacity">Increase Capacity</button>
   </div>
</template>

<script>
//第一种
import {ref,computed } from 'vue'
export default {
  setup(){
    const capacity = ref(4)
    const attending = ref(["Tim","Bob","Joe"])
    const spaceLeft = computed(()=>{
      return capacity.value - attending.value.length;
    });
    function increaseCapacity(){ capacity.value++; }
    return {capacity,increaseCapacity,attending,spaceLeft}   


  }
} 

//返回一个响应式函数 第二种
import { reactive,computed } from 'vue'
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spaceLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
    //我们不再使用.value
    function increaseCapacity() { event.capacity++; }
    //把这个event放入到template中
    return { event,increaseCapacity}
  }
}


</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 六、 Modularizing

使用CompositionAPI的两个理由

可以按照功能组织代码

组件间功能代码复用

# 七、 LifecycleHooks - 生命周期钩子

Vue2	Vue3
beforeCreate	❌setup(替代)
created	❌setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

应用

# 一、为什么选择CompositionAPI

# Vue2的局限性

组件逻辑膨胀导致的可读性变差
无法跨组件重用代码
Vue2对TS的支持有限

在传统的OptionsAPI中我们需要将逻辑分散到以下六个部分

OptionsAPI

components
props
data
computed
methods
lifecycle methods

# 如何使用CompositionAPI解决问题

最佳的解决方法是将逻辑聚合就可以很好的代码可读性。

这就是我们的CompositionAPI语法能够实现的功能。CompositionAPI是一个完全可选的语法与原来的OptionAPI并没有冲突之处。他可以让我们将相同功能的代码组织在一起，而不需要散落到optionsAPI的各个角落

# 代码重用方法PK

Vue2中的跨组件重用代码，我们大概会有四个选择

Mixin - 混入

代码混入其实就是设计模式中的混合模式，缺点也非常明显。
可以理解为多重继承，简单的说就是一个人如何有两个父亲

缺点

无法避免属性名冲突
继承关系不清晰

Mixin Factory - 混入工厂

返回一个

✅代码重用方便

✅继承关系清洗

ScopeSlots - 作用域插槽

❌可读性不高

❌配置复杂 - 需要再模板中进行配置

❌性能低 - 每个插槽相当于一个实例

CompositionApi - 复合API

✅代码量少

✅没有引入新的语法，只是单纯函数

✅异常灵活

✅工具语法提示友好 - 因为是单纯函数所以很容易实现语法提示、自动补偿

# 二、setup & ref

# 使用CompositionAPI理由

✅更好的Typescript支持

✅在复杂功能组件中可以实现根据特性组织代码 - 代码内聚性👍 比如：排序和搜索逻辑内聚

✅组件间代码复用

# setup是什么

在以下方法前执行：
- Components
- Props
- Data
- Methods
- Computed Properties
- Lifecycle methods
可以不在使用难于理解的this
有两个可选参数
- props - 属性 (响应式对象且可以监听(watch))

import {watch} from "vue"
export defalut {
	props: {
		name: String
	},
	setup(props) {
		watch(() => {
			console.log(props.name)
		})
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

context 上下文对象 - 用于代替以前的this方法可以访问的属性

setup (props,context) {
	const {attrs,slots,parent,root,emit} = context
}

@前端进阶之旅: 代码已经复制到剪贴板

# ref是什么

对基本数据类型数据进行装箱操作使得成为一个响应式对象，可以跟踪数据变化。

# 总结

可维护性明显提高

可以控制哪些变量暴露
可以跟中哪些属性被定义（属性继承与引用透明）

# 三、Methods

# 基础用法

# 自动拆装箱总结

JS ：需要通过.value访问包装对象
模板: 自动拆箱

# 四、 Computed - 计算属性

这个地方实在没什么好讲的，和Vue2没变化

<template>
  <div>
    <div>Capacity： {{ capacity }}</div>
    <p>Spases Left: {{ sapcesLeft }} out of {{ capacity }}</p>
    <button @click="increaseCapacity()">Increase Capacity</button>
  </div>
</template>

<script>

import { ref, computed, watch } from "vue";
export default {
  setup(props, context) {
    const capacity = ref(3);
    const attending = ref(["Tim", "Bob", "Joe"]);
    function increaseCapacity() {
      capacity.value++;
    }
    const sapcesLeft = computed(() => {
      return capacity.value - attending.value.length;
    });
    return { capacity, increaseCapacity, attending, sapcesLeft };
  },
};
</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 五、Reactive - 响应式语法

之前reactive 的 Ref 去声明所有的响应式属性

import { ref,computed } from 'vue'
export default {
  setup(){
    const capacity = ref(4);
    const attending = ref(["Tim","Bob","Joe"]);
    const spacesLeft = computed(()=>{
      return capacity.value - attending.value.length
    })
    function increaseCapacity(){ capacity.value ++;}
    return { capacity,increaseCapacity,attending,spacesLeft}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

但是有另一个等效的方法用它去代替 reactive 的Ref

import { reactive,computed } from 'vue'
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

过去我们用vue2.0的data来声明响应式对象,但是现在在这里每一个属性都是响应式的包括computed 计算属性

这2种方式相比于第一种没有使用.

接下来我们再声明method 这2种语法都ok，取决于你选择哪一种

setup(){
  const event = reactive(){
    capacity:4,
    attending:["Tim","Bob","Joe"],
    spacesLeft:computed(()=>{
      return event.capacity - event.attending.length;
    })
    function increaseCapacity(){event.capacity++}
    //return整个对象
    return {event,increaseCapacity}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

<p>Spaces Left:{{event.spacesLeft}} out of {{event.capacity}}</p>
<h2>Attending</h2>
<ul>>
	<li v-for="(name,index) in event.attending" :key="index">
     {{name}}
  </li>
</ul>
<button @click="increaseCapacity()"> Increase Capacity</button>

@前端进阶之旅: 代码已经复制到剪贴板

在这里我们使用对象都是.属性的方式，但是如果这个结构变化了，event分开了编程了一个个片段，这个时候就不能用.属性的方式了

//在这里可以使用toRefs
import {reactive,computed,toRefs} from 'vue'
export default{
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity -event.attending.length;
        
      })
    })
    function increaseCapacity(){ event.capacity ++ }
    return {...toRefs(event),increaseCapacity}
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

如果没有 increaseCapacity() 这个方法直接可以简化为

return toRefs(event)

@前端进阶之旅: 代码已经复制到剪贴板

完整代码

<div>
   <p>Space Left : {{event.spacesLeft}} out of {{event.capacity}} </p>
   <h2>Attending</h2>
   <ul>
      <li v-for="(name,index)" in event.attending :key="index">{{name}}
      </li>


     
   </ul>
   <button @click="increaseCapacity">Increase Capacity</button>
   </div>
</template>

<script>
//第一种
import {ref,computed } from 'vue'
export default {
  setup(){
    const capacity = ref(4)
    const attending = ref(["Tim","Bob","Joe"])
    const spaceLeft = computed(()=>{
      return capacity.value - attending.value.length;
    });
    function increaseCapacity(){ capacity.value++; }
    return {capacity,increaseCapacity,attending,spaceLeft}   


  }
} 

//返回一个响应式函数 第二种
import { reactive,computed } from 'vue'
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spaceLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
    //我们不再使用.value
    function increaseCapacity() { event.capacity++; }
    //把这个event放入到template中
    return { event,increaseCapacity}
  }
}


</script>

@前端进阶之旅: 代码已经复制到剪贴板

# 六、 Modularizing

使用CompositionAPI的两个理由

可以按照功能组织代码

组件间功能代码复用

# 七、 LifecycleHooks - 生命周期钩子

Vue2	Vue3
beforeCreate	❌setup(替代)
created	❌setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

应用