vu3知识点

>>>Templata支持多个根标签...<<<

1、初识setup
1、setup是Vue3中一个新的配置项，值为一个函数；

2、组件中所要用到的数据、方法等，均要配置在setup中；

3、setup的两种返回值：

（1）：若返回一个对象，则对象中的属性、方法，均可以在模板中直接使用；

（2）：若返回一个渲染函数：则可以自定义渲染内容；

setup的两个注意点：

1、setup执行时机，在beforeCreate之前执行一次，this是undefined；

2、setup的参数：

attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs；

slots：收到的插槽内容，相当于this.$slots;

emit:分发自定义事件的函数，相当于this.$emit。

2、ref函数
1、作用：定义一个响应式数据

2、语法：const xxx=ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）；

js中操作数据：xxx.value;

模块中读取数据不需要value，直接{{xxx}}；

3、备注

接收的数据可以是基本类型也可以是对象类型；

基本类型的数据响应式依然靠Object.defineProperty()的get和set完成的；

对象类型的数据：内部求助了Vue3中的一个新函数---reactive函数；

3、reactive函数

作用：定义一个对象类型的响应式数据（基本类型用ref）；

语法：const 代理对象=reactive(被代理对象）接收一个对象（或数组），返回一个代理对象（proxy对象）；

4，生命周期：

beforeCreate===>Not needed*

created===>Not needed*

beforeMount ===>onBeforeMount

mounted===>onMounted

beforeUpdate===>onBeforeUpdate

updated===>onUpdatedupdated

beforeUnmount==>onBeforeUnmount

unmounted==>onUnmounted

备注1：最早只能在 onBeforeMount 获取axios数据，且里面不能操作dom
备注2：全局解绑已经没有了。onBeforeUnmount 和 onUnmounted
备注3：dom操作，除了常规的clas style等，可以通过ref，但是在vue3的 Composition API中，需要定义成变量，么有$refs了

5、main.js的变化

2.x 全局 API（ Vue）	3.x 实例 API(app)
Vue.config.xxxx	app.config.xxxx
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties
Vue.config.productionTip	移除

vue2中可以通过Vue.prototype去操作原型，在vue3中只能通过app.config.globalProperties，当时玩的时候还以为自己写错了，修改的这些你会发现改动的东西挺多的变量

6.指令与插槽

vue2中使用slot可以直接使用slot,而vue3中必须使用v-slot的形式

v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用

vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突

vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes

vue3中移除v-on.native修饰符

vue3中移除过滤器filter

举例键盘回车事件

setup(){
    const handleKeydown = (event:any) => {
      if (event.code === 'Enter') {
        // 处理按下回车键的逻辑
        console.log('Enter 键被按下');
      }
    };
    onMounted(() => {
      window.addEventListener('keydown', handleKeydown);
    });
    onUnmounted(() => {
      window.removeEventListener('keydown', handleKeydown);
    });
}

7，vue3的响应式原理（proxy）

v-model ..proxy

8，vue3中computed

变为组合式Api，那么意味着需要引入，当前如果需要去修改，就需要去终结computed

 const number = ref(5);

const double = computed(() => {
	return number.value * 2;
});

return {double}

9，router

<template>
  <div>
    <!-- 路由链接 -->
    <router-link to="/about">关于我们</router-link>

    <!-- 路由视图 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    // 在某个事件或方法中进行路由跳转
    const navigateToAbout = () => {
      router.push('/about');
    };

    return {
      navigateToAbout
    };
  }
};
</script>

10，hooks模式

提纯代码，可以把逻辑放到单独的文件中，甚至可以复用hooks

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleClick">{{state.count}}{{state.doubble}}</button>
  </div>
</template>
<script>
	import {useCount} from "../hooks/useCount.js"
	export default{
		setup(){
			let {state, handleClick} = useCount();

			return {
				state,
				handleClick
			}
		}
	}
</script>

<!--hooks的文件useCount.js-->
import {
	reactive,
	computed
} from "vue"

export function useCount() {
	const state = reactive({
		count: 0,
		doubble: computed(() => state.count * 2)
	});

	function handleClick() {
		state.count++;
	}
	return {
		state,
		handleClick
	}
}

vue2 和vue3的大致区别

1.源码组织方式变化：使用 TS 重写
2.支持 compositionAPI，基于函数的 api，更灵活组织组件逻辑(Vue2 使用 options api) 
3.响应式系统提升：Vue3 的响应式数据原理改成了 Proxy，可以监听动态新增删除属性，以及数组变化 
4.编译优化：Vue 通过标记静态根节点来优化 Diff，Vue 则标记和提升所有静态根节点，Diff 的时候只需要去对比动态节点的内容 
5.打包体积优化：移除了一些不常用的 api(inline-template,filter)
6.生命周期的变化，使用 setup 替代了 beforeCreate 和 created
7.template 支持多个根标签
8.Vuex 状态管理，创建实例的方式，Vue2 使用 new store；Vue3 使用 createStore;
9.Route 获取页面实例以及路由信息，Vue2 使用 this 的方式获取；而 Vue3 采用 getCurrentInstance/userRoute,userRouter 的方式来获取
10.对 props 的使用：Vue2 通过 this 的方式使用；Vue3 则直接通过 props 使用；