vue3总结大刚

注意要代码书写时候，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() 函数中的特定函数来模拟生命周期的行为。

详情参考官网：生命周期钩子 | Vue.js

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

<template>
    <div id="target">
        asdfa
    </div>
    <div>
      <button @click="showModal">打开模态框</button>
      <teleport to="#target">
        <div v-if="visible" class="modal">
          <h2>模态框标题</h2>
          <p>模态框内容</p>
        </div>
      </teleport>
    </div>
  </template>
  
  <script>
  import { ref, onMounted  } from 'vue';
  
  export default {
    setup() {
      const visible = ref(false);
      const showModal = () => {
        visible.value = true;
      };
      return {
        visible,
        showModal,
     
      };
    }
  };
  </script>
  
  <style>
  #target{
    width: 500px;
    height: 500px;
    background-color: palegoldenrod;
  }
  .modal {
    position: relative;
    width: 200px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  </style>
  

综合汇总：

在script里面加上setup 在vue3.2 中正式支持！

<script setup>

这样就不需要return，和引入一些api了

面试题：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 使用；

1,vue2 和3的区别

2，整理所有的vue3笔记到博客

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

---