前端

注意要代码书写时候，vue3 和vue2 的区别

1，建议不要写this了

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

请使用ref（）ref或者reactive

1》如何声明变量（普通的data 依然可以。ts中使用Composition API 的api模式）

2》如何修改变量值。不能直接使用this，需要使用""变量.value"

3》如何定义事件，方法

<script lang="ts">
import {defineComponent,ref} from 'vue'
export default defineComponent({
  setup() {
    const msg = ref<number>(123);
    const arr = ref([12,123,777]) 
    const abc = ()=>{
      //修改msg的值
      msg.value = 888
    }
    return {msg,arr,abc}
  }
})
</script>

如果觉得的单独定义变量，比较繁琐，也可以选用reactive，实现多变量定义

注意：在return中需要加入...toRefs(）拓展运算，防止修改对象中的变量不生效（当然，你也可以使用Vue.set实现）

<script lang="ts">
import {defineComponent,ref,reactive, toRefs} from 'vue'
export default defineComponent({
  setup() {
    const msg = ref<number>(123);
    const arr = ref([12,123,777]) 
    const info = reactive({
      a:1,
      b:2,
      c:3
    })
    const abc = ()=>{
      //修改msg的值
      msg.value = 888
      info.a = 99
      
    }
    return {...toRefs(info),msg,arr,abc}
  }
})
</script>

2，生命周期：

备注：在 Vue 3 中，使用 Composition API，生命周期钩子函数已经被废弃。取而代之的是使用 setup() 函数中的特定函数来模拟生命周期的行为。

详情参考官网：cn.vuejs.org/guide/essen…

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了
    <div ref="myabc">
      我是dom操作
    </div>
    
    const myabc = ref(null)//定义
    onBeforeMount(() => {
      console.log(msg.value);
      console.log(myabc.value);
    })
    onMounted(()=>{
      console.log(myabc.value);//调用
    })
    
    return {myabc} //返回

3、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，当时玩的时候还以为自己写错了，修改的这些你会发现改动的东西挺多的变量

举例：定义一个全局的组件

const app = createApp(App)
app.component('MyDiv',MyDiv)
app.use(store).use(router).mount('#app')

举例：定义全局

main.js中
app.config.globalProperties.$myVals = 'Hello, world!';
调用方式：this.$myVals 
这种方式不适用于setup的Composition API
​
如果使用setup方法：
main.js中
app.provide('$duMy', 'abceffef');
​
页面中：setup中
import { inject } from 'vue';
const kk  = inject('$duMy');
return {kk}

4.指令与插槽

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);
    });
}
​
​

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

v-model ..proxy

7，vue3中computed

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

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

8，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>

9，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
	}
}

10，Teleport传送门组件

可以给弹框定位到想要的位置，比如说body 或者 某个div

pi模式，开发一套后台管理系统！比如，使用elemenui 。要求有增删改查。登录的页面跳转，