Vue3.0 中的响应式对象
Vue3.0 中的响应式对象
- Vue3.0 中的响应式对象
-
- v-model
- ref 和 reactive
- watch
- computed
Vue3.0 中的响应式对象
v-model
v-model 表单输入绑定
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="age">
<button @click="onClick">提交button>
div>
body>
<script>
const { createApp } = Vue
const app = {
setup() {
const age = 18
function onClick() {
alert(age)
}
return {
age,
onClick
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
ref 和 reactive
使用 ref 和 reactive 包装响应式对象和 v-model，实现双向数据绑定
-
ref 的参数一般是基本数据类型，也可以是对象类型
-
reactive 的参数一般是对象或者数组，他能够将复杂数据类型变为响应式数据。
-
双向数据绑定实质是响应式对象在 HTML 和 Javascript 之间传递数据的一个典型应用：
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="age">
<button @click="onClick">提交button>
div>
body>
<script>
const { createApp, ref, reactive } = Vue
const app = {
setup() {
// ref: 包装基本数据类型
const age = ref(18)
// reactive: 包装对象或数组
const profile = reactive({
age: 18
})
function onClick() {
alert(age.value)
}
return {
age,
onClick
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
Vue3.0 响应式对象使用场景
没有使用响应式对象：
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<div>{{ number }}div>
<button @click="onIncrement">+1button>
div>
body>
<script>
const { createApp, ref, reactive } = Vue
const app = {
setup() {
let number = 1;
function onIncrement() {
number++
console.log(number)
}
return {
number,
onIncrement
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
使用响应式对象实现 js 到 html 数据的绑定：
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<div>{{ number }}div>
<button @click="onIncrement">+1button>
div>
body>
<script>
const { createApp, ref, reactive } = Vue
const app = {
setup() {
let number = ref(1);
function onIncrement() {
number.value++
console.log(number.value)
}
return {
number,
onIncrement
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
watch
推荐对单个 ref 进行监听或者监听 reactive 对象的单个属性
watch 监听器基础使用范例
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<div>{{ fullName }}div>
div>
body>
<script>
const { createApp, ref, reactive, watch } = Vue
const app = {
setup() {
const firstName = ref('')
const lastName = ref('')
let fullName = ref('');
watch(firstName, (newVal, oldVal) => {
fullName.value = firstName.value + lastName.value
})
watch(lastName, (newVal, oldVal) => {
fullName.value = firstName.value + lastName.value
})
return {
firstName,
lastName,
fullName
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
watch 高级用法——监听 reactive 对象
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="name.firstName">
<input type="text" v-model="name.lastName">
<div>{{ name.fullName }}div>
div>
body>
<script>
const { createApp, ref, reactive, watch } = Vue
const app = {
setup() {
const name = reactive({
firstName: '',
lastName: '',
fullName: ''
})
watch(name, (newVal, oldVal) => {
name.fullName = name.firstName + name.lastName
})
return {
name
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
watch 高级用法——监听 reactive 对象下的单个属性
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="name.firstName">
<input type="text" v-model="name.lastName">
<div>{{ name.fullName }}div>
div>
body>
<script>
const { createApp, ref, reactive, watch } = Vue
const app = {
setup() {
const name = reactive({
firstName: '',
lastName: '',
fullName: ''
})
// 推荐监听单个属性，通常情况下不推荐对整个的 reactive 对象进行监听
watch(() => name.firstName, (newVal, oldVal) => {
name.fullName = name.firstName + name.lastName
})
return {
name
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
computed
computed 计算属性
- computed 监听函数内所有的属性或变量，任何一个属性有变化时都会触发重新计算
- computed 返回值为一个计算属性 ref，.value 属性为 readonly 只读状态
- 计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<div>{{ fullName }}div>
div>
body>
<script>
const { createApp, ref, reactive, watch, computed } = Vue
const app = {
setup() {
const firstName = ref('')
const lastName = ref('')
// fullName 的 value 属性为 readonly 只读状态
const fullName = computed(() => firstName.value + lastName.value)
return {
firstName,
lastName,
fullName
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
computed 的 set 和 get 方法
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<div>{{ fullName }}div>
div>
body>
<script>
const { createApp, ref, reactive, watch, computed } = Vue
const app = {
setup() {
const firstName = ref('')
const lastName = ref('')
const fullName = computed({
get: () => firstName.value + lastName.value,
set: (val) => {
firstName.value = val
}
})
// 此时设置了 set 属性可以直接修改 fullName 的 value 值
fullName.value = 88
return {
firstName,
lastName,
fullName
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
watch、computed 和普通 JS函数 的场景和区别
普通JS函数实现：
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.beta.17.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<div>{{ getFullName() }}div>
div>
body>
<script>
const { createApp, ref, reactive, watch, computed } = Vue
const app = {
setup() {
const firstName = ref('')
const lastName = ref('')
function getFullName() {
return firstName.value + lastName.value
}
return {
firstName,
lastName,
getFullName
}
}
}
createApp(app).mount('#app')
script>
<style>
style>
html>
- 监听一个变量或属性当它发生变更时去触发一些事件时适合使用 watch（着重某一个变量的变化监听）
- 目的是为了得到一个最终的属性结果时适合使用 computed（着重最终计算的结果）
- 与普通的JS相比较 computed 相对来说性能较好一点，因为 computed 有计算缓存