vue2和vue3区别 浅析
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>书写起来的优势：
-
更简洁的代码；
-
可以使用
typescript声明prop和自定义事件； -
更好的运行时性能；
-
更好的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 修饰符