数据响应原理
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 )
修改成为响应式;
vue2源码解析:vue2数据响应式原理解析-CSDN博客
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
修饰符