vue3与vue2的区别，以及注意事项

大家好，我是web前端工程师 小扩。

之前vue2用的多，随着vue3的逐渐普及，看来需要研究一下了。

本篇文章估计也没什么人看，主要给自己学习写备注。

如果对其他人有帮助，那就更好了。

vue2和vue3双向数据绑定原理发生了改变

vue2的双向数据绑定是利用ES5的一个 API Object.definePropert()对数据进行劫持，结合发布订阅模式来实现的。

vue3中使用了ES6的ProxyAPI 对数据代理，可以省去for in、闭包等内容来提升效率，以及可以监听数组。

Vue3支持碎片(Fragments)

不用在最外层包个div。

Composition API  ，及建立数据

vue2的选项型API在代码里分割了不同的属性: data,computed属性，methods，等。

数据放入data属性中。

export default { data() { return { num:1 } }, methods: {} }

vue3的合成型API能使用新的setup()方法来分割，使代码更整洁。

对象用reactive，其他类型用ref来控制数据的双向绑定。

ref需要加.value获取数据，reactive 不需要。

import { ref, reactive } from 'vue' export default { setup() { var num = ref(1) var list= reactive({name:'测试'}) return { num,list } } }

生命周期调整

vue3没有beforeCreate和created，其他生命周期前面加on，用驼峰命名。

父子传参不同，setup() 函数特性

setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）。

还有就是setup里没this。

父子数据传参

<div> <home :data="num" @toFather="fromChild"></home> </div>

import home from '../home/home.vue' import { ref } from 'vue' export default { components: { home }, setup() { var num = ref('我是父级数据') let fromChild = function(data) { console.log(data) } return { num, fromChild } } }

<view> {{data}} </view>

export default { props: { data: String }, setup(prpos, context) { console.log(prpos.data) context.emit('toFather', '子组件数据') } }

使用<script setup>写父子数据传参

<ChildComponent :parentData="parentData" @childEvent="handleChildEvent" />

import { ref } from 'vue';import ChildComponent from '../home/home.vue';const parentData = ref('父组件数据');const handleChildEvent = (data) => { console.log('从子组件接收的数据:', data);};

{{parentData}} <button @click="sendDataToParent">向父组件发送数据</button>

import { defineProps, defineEmits } from 'vue'; const props = defineProps({ parentData: String }); const emit = defineEmits(['childEvent']);

const sendDataToParent = () => { emit('childEvent', '子组件数据'); };

vue3 Teleport渲染位置控制

<div>测试</div> </teleport>

to属性值为渲染的元素