vue2和vue3的区别

vue实例的创建及挂载

//Vue2的写法
import Vue from 'Vue' //引入Vue构造函数
const vm = new Vue({
  render:h=> h(App)
});
// 挂载
vm.$mount('#app')
console.log(vm)

//Vue3的写法
import { createApp } from 'vue' //引入一个名为createApp的工厂函数
const app = createApp(App);
// 挂载
app.mount('#app');
console.log(app)

模板语法

打开App.vue文件，唯一和Vue2不同的是：Template不再强调一定要有根标签了。

setup函数

setup函数可以说是Vue3的属性和方法入口。在Vue2中，为什么使用的是data、methods、computed。在Vue3中我们把属性和方法都放在setup函数中。setup函数中有以下几个特点：
.setup(props,context):接收两个参数
(1) props ：接收来自父组件传来的参数

(2) context ：上下文，主要包含3个使用参数：attrs,emits,slots，相当于Vue2中this的
attrs,emits,slots

props:[‘msg’],
emits:[‘eventOne’]
// Vue3中，使用了emits需要像props一样，在页面中声明调用了函数,否则则会警告(虽然还是能用)

2.有返回值，返回值可以是两种：
(1) 返回 对象 ，返回的对象中的属性方法，可在模板中直接使用；

(2) 返回 渲染函数 ，可以自定义渲染的内容；

3.函数内部没有this；
4.当内部有异步函数，需要使用到await的时候，可以直接使用，不需要在setup前面加async；

ref

想要让Vue监听到数据的变化，实现响应式，要引入ref去声明，这时候变量就是双向绑定的了

vue2和vue3的响应式原理区别

Vue2
监听对象的时候，也是用的defineProperty，并进行递归判断，如果是嵌套对象，则一直递归到所有值去监听
监听数组的时候，重写数组的方法，对数组的方法进行了包裹
存在的问题：

1.新增属性，删除属性，界面不会更新，需要调用set/delete
2.数组直接通过下标修改，页面不会更新,需要调用splice，或者set

Vue3
重写了get、set、deleteProperty方法，并做监听
target:原对象，propName：属性名，value：更改的新值