vue2和vue3区别 浅析

数据响应原理

vue2

通过 Object.defineProperty 来更新数据,只会监听使用Object.defineProperty创建的(初始化)的数据，并通过订阅方式进行发布，在初始化之外的数据，不会受到监听；

在数据初始化时，定义一个对象

data() {return {obj:{id:1,name: '标题'}}
}

这时vue是通过Object.defineProperty()对obj对象的id和name属性 get和set行为监听成为响应式，如果在初始化之后，再往obj里面新增属性，就不会产生响应式效果；

解决方法可以使用 vue提供的全局方法Vue.set( target, propertyName/index, value ) 修改成为响应式;

vue3

1：使用proxy代理对象，

使用reactive修改复杂数据，例如 object和array,通过创建proxy实例对象，对数据进行处理

优势：1：defineProperty()只能对某个属性进行监听，不能对整个对象进行监听；

页面结构

vue2使用选项类型api，data,computed,methds，通过属性的方式进行书写；

vue3使用合成型api书写,以方法的方式进行分块书写不同的功能点；

vue3 在基本使用中案例使用的是setup()钩子形式,同时也提示了使用<script setup>人体工学的方式；<script setup>是setup()方法的语法糖；

<script setup>书写起来的优势：

1. 更简洁的代码；

2. 可以使用typescript声明prop和自定义事件；

3. 更好的运行时性能；

4. 更好的IDE类型推导性能；

v-model

vue2的v-model的组件使用方式在官网上也有讲解：在组件上使用 表单输入绑定 — Vue.js

text和textarea元素使用value prop和input事件

checkbox和radio使用的 value prop和 change事件

select 使用的也是 value prop和change事件

例如：

<input type="text" :value="" @input="$emit('input',$event.target.value)"></input>
<template><div><input type="text" :value="value" @input="$emit('input',$event.target.value)"></div>
</template>
​
<script>
export default {props: {value: String,  // 默认接收一个名为 value 的 prop}
}
</script>

使用 input的原生属性 获取内容再提交 @input="$emit('input',$event.target.value)"

在vue3的组件中实现vue2 v-model方式

定义一个input组件

声明html

<template><div><input type="text" :value="value" @input="$emit('input', handleInputChange($event))" /><!-- @input="$emit('input', $event.target.value) --></div>
</template>

项目中做了类型检查，所以$event.target.value不能直接使用，做了一个函数处理类型 handleInputChange

js部分

<script lang="ts" setup>
withDefaults(defineProps<{value: string}>(),{value: '',}
)
const handleInputChange = (event: Event) => (event.target as HTMLInputElement).value
​
defineEmits(['input'])
</script>

因为我用到的是 ts，所以里面有withDefaults

在父组件中正常引入子组件，并在html中使用

子组件：<my-input :value="'msg'" @input="handlerChanger"></my-input>

页面显示是我给的默认值：msg, input输入内容时，也会在 handlerChanger中显示

vue3更新的方式 是把vue2 html中默认的input 改成 update:modelValue

vue3 废除 model 选项和 .sync 修饰符