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 之间传递数据的一个典型应用:

Vue3.0 中的响应式对象_第1张图片

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 有计算缓存

你可能感兴趣的:(Vue,javascript,vue.js,前端)