Vue基础知识—— v-model、watch、computed

于 2024-11-24 01:30:01 发布
阅读量1.4k 收藏 10
点赞数 23
分类专栏： web前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2302_81399643/article/details/144000058
版权

接上一篇Vue知识点

​想要学习更多前端知识：点击Web前端专栏

 目录

一、 双向数据绑定指令 v-model（实时渲染）

二、数据变动侦听器 watch 

三、计算属性 computed

一、 双向数据绑定指令 v-model（实时渲染）

 在Vue.js中，v-model是一个指令，用于实现双向数据绑定。它可以在表单元素（比如input、textarea、select等）上使用。

v-model指令可以将表单元素的值绑定到Vue实例的数据属性上。当用户在表单元素中输入内容时，数据属性的值会自动更新。同时，当数据属性的值改变时，表单元素的值也会相应地更新。

下面通过几个实验来演示使用v-model：

实验一： 文本输入框的双向数据绑定

 首先，在Vue实例中定义一个数据属性 text，用于保存文本输入框的值 ; 然后，使用v-model指令将文本输入框的值与数据属性绑定起来 ; 最后可以使用{{ data.text }}来显示文本输入框的值

<body> 
   <div id="app">
        <!-- 使用{{ data.text }}来显示文本输入框的值 -->
        <h3>文本框: {{ data.text }} </h3>
        <!-- 使用v-model指令将文本输入框的值与数据属性绑定起来 -->
        输入您要更改的昵称: <input type="text" v-model="data.text">        
    </div>

    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
        setup() {
            // 定义了一个响应式对象
            const data = reactive({
                text: "www.baidu.com", //文本框
            })

            return {data}
        }
    }).mount("#app")
    </script>
</body>

​ 

这样，当用户在文本输入框中输入内容时，数据属性 text 的值会自动更新。同时，当 text 的值改变时，文本输入框的值也会相应地更新。 

 实验二： 单选框的双向数据绑定

首先，在Vue实例中定义一个数据属性 radio，用于保存单选框的选中值；然后，使用v-model指令将单选框的选中值与数据属性绑定起来；最后使用 {{ data.radio }}来显示选中的值

注意：在单选框中，v-model指令绑定的是选项的值，而不是选项本身。所以在定义选项时，需要为每个单选框添加一个唯一的value值。

<body>

    <div id="app">
        <!-- 使用{{ data.radio }}来显示文本输入框的值 -->
        <h3>您单选了: {{ data.radio }} </h3>
        <!-- 使用v-model指令将单选框的选中值与数据属性绑定起来 -->
        <input type="radio" value="唱歌"  name="ra" v-model="data.radio">唱歌
        <input type="radio" value="跳舞"  name="ra" v-model="data.radio">跳舞
    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
        setup() {
            // 定义了一个响应式对象
            const data = reactive({
                radio: "",             //单选框
            })

            return {data}
        }
    }).mount("#app")
    </script>
</body>

在这个实验中，我们给每个单选框添加了一个value属性，表示该选项的值。而v-model指令会将选中的值赋给数据属性 radio

这样，当用户选中其中一个单选框时，数据属性 radio 的值会自动更新。同时，当 radio 的值改变时，与之绑定的单选框的选中状态也会相应地更新

实验三： 多选框的双向数据绑定

首先，在Vue实例中定义一个数据属性 checkbox，用于保存多选框的选中值，可以是一个数组；然后，使用v-model指令将多选框的选中状态与数据属性绑定起来；最后可以使用{{ data.checkbox }}来显示选中的值

注意：在多选框中，v-model指令绑定的是选项的值，而不是选项本身。所以在定义选项时，需要为每个多选框添加一个唯一的value值。

<body>

    <div id="app">
        <!-- 实验三： 多选框的双向数据绑定 -->
        <!-- 使用{{ data.checkbox }}来显示文本输入框的值 -->
        <h3>您多选了: {{ data.checkbox }} </h3>
        <!-- 使用v-model指令将多选框的选中状态与数据属性绑定起来 -->
        <input type="checkbox" value="唱歌"  v-model="data.checkbox">唱歌
        <input type="checkbox" value="跳舞"   v-model="data.checkbox">跳舞
    </div>
    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
        setup() {
            // 定义了一个响应式对象
            const data = reactive({
                checkbox: [],          //复选框（数组）
            })

            return {data}
        }
    }).mount("#app")
    </script>
</body>

 

在这个例子中，我们给每个多选框添加了一个value属性，表示该选项的值。而v-model指令会将选中的多个值以数组的形式赋给数据属性 checkbox

这样，当用户选中或取消选中一个多选框时，数据属性 checkbox 的值会自动更新。同时，当 checkbox 的值改变时，与之绑定的多选框的选中状态也会相应地更新。

实验四： 下拉菜单的双向数据绑定

 首先，在Vue实例中定义一个数据属性，用于保存下拉菜单的选中值；然后，使用v-model指令将下拉菜单的选中值与数据属性绑定起来；最后使用{{ data.select }}来显示选中的值

<body>
    <div id="app">
        <!-- 使用{{ data.select }}来显示文本输入框的值 -->
        <h3>请问您的专业是： {{ data.select }} </h3>
        <!-- 使用v-model指令将下拉菜单的选中值与数据属性绑定起来 -->
        <select v-model="data.select">
            <option value="">请选择</option>
            <option value="计算机应用技术">计算机应用技术</option>
            <option value="数字媒体技术">数字媒体技术</option>
            <option value="物联网工程">物联网工程</option>
            <option value="电子工程">电子工程</option>
        </select>
    </div>
    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
        setup() {
            // 定义了一个响应式对象
            const data = reactive({
                select: ""        //下拉框
            })

            return {data}
        }
    }).mount("#app")
    </script>
</body>

在上面代码中，每个option选项都有一个value属性，表示该选项的值。v-model指令会将选中的值赋给数据属性 select 

这样，当用户选择下拉菜单中的选项时，数据属性 select 的值会自动更新。同时，当 select 的值改变时，与之绑定的下拉菜单的选中状态也会相应地更新。 

需要注意的是，v-model指令只能用于表单元素，不能用于自定义组件

二、数据变动侦听器 watch 

数据变动侦听器（watch）是Vue提供的一个功能，用于在数据发生变化时执行相应的操作。通过watch属性，我们可以监听数据的变化并做出相应的响应

下面通过几个实验来演示 watch 的使用方法：

实验1. 侦听响应式字符串 hobby 的数据变动

 作用：1.监听数据变动  2.拿到变动的值

 首先在Vue实例中定义需要监听的数据hobby，然后使用watch属性监听hobby的变化

<body>
    <div id="app">      
        爱好：
        <!-- 使用v-model指令将下拉菜单的选中值与数据属性绑定起来 -->
        <select v-model="hobby">
            <option value="请选择">请选择</option>
            <option value="写作">写作</option>
            <option value="画画">画画</option>
            <option value="运动">运动</option>
        </select>
    </div>

    <script type="module">
        //导入watch
        import { createApp, ref, reactive, watch } from './vue.esm-browser.js'
    
        createApp({
            setup() {
                //定义需要监听的数据
                const hobby = ref("请选择")    //爱好

                watch:(hobby, 
                    function(newValue, oldValue){
                    // 当hobby的值发生变化时，会执行下面的代码
                    console.log("hobby的旧值:", oldValue, 
                                "--> hobby的新值:", newValue)
    
                    if (newValue == "画画") {
                        console.log("您的爱好选中了：画画")
                    }
                })
                return { hobby }
            }
        }).mount("#app")
    </script>
</body>

在这个实验中，watch属性中定义了一个 hobby 的监听器函数。当 hobby 的值发生变化时，监听器函数会被触发。函数有两个参数，newValue 表示变化后的值，oldValue 表示变化前的值。 

 实验2. 侦听响应式对象 date 的数据变动

 首先，定义响应式对象 date；然后，使用 watch 方法监听 date 对象的变动

<body>
        <br>
        出生年月：
        <!-- 使用v-model指令将下拉菜单的选中值与数据属性绑定起来 -->
        <select v-model="date.year">
            <option value="">请选择</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
        </select> 年
       
        <select v-model="date.month">
            <option value="">请选择</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select> 月
    </div>

    <script type="module">
        //导入watch
        import { createApp, ref, reactive, watch } from './vue.esm-browser.js'
    
        createApp({
        
            setup() {
                //定义需要监听的数据
                const date = reactive({       //日期
                    year: "2023",
                    month: "10"
                })

                watch(date, 
                    function(newValue, oldValue){
    
                        console.log(        "data的旧值：", oldValue,
                                    " \n--> data的新值：",   newValue)
        
                        if (newValue.year == "2025") {
                            console.log("您选中的年份是：2025年")
                        }
        
                        if (newValue.month == "11") {
                            console.log("您选中的月份是：11月")
                        }
                })
                return { date }
            }
        }).mount("#app")
    </script>
</body>

注意：这里在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。 

 实验3. 侦听 date 中 year 的数据变动

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组

注意：你不能直接侦听响应式对象的属性值, 比如数据源date.year

这里需要用一个返回该属性的 getter 函数 ：    () => date.year  （可以解决上面实验2旧值与新值相同的问题）

定义 date 是一个响应式对象，其中包含year属性；然后，创建一个getter 函数来获取 year 属性的值

<body>
    <div id="app">    
        出生年月：
        <select v-model="date.year">
            <option value="">请选择</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
        </select> 年
    
        <select v-model="date.month">
            <option value="">请选择</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select> 月
    </div>
    <script type="module">
        //导入watch
        import { createApp, ref, reactive, watch } from './vue.esm-browser.js'
    
        createApp({
            setup() {

                const date = reactive({       //日期
                    year: "2023",
                    month: "10"
                })
                //watch 的第一个参数是一个 getter 函数
                watch( () => date.year,     
                    (newValue, oldValue) => {
                        console.log("date.year的旧值：", oldValue, " --> date.year的新值：", newValue)
        
                        if (date.year == "2024") {
                            console.log("您选中的年份是：2024年")
                        }
                    }
                )

                return { date }
            }
        }).mount("#app")
    </script>
</body>

监听器函数会在year属性的值发生变化时执行，它有两个参数：newValue 表示变化后的值，oldValue表示变化前的值。

三、计算属性 computed

计算属性 (computed) 是 Vue.js 中一个非常有用的特性，它可以根据其他属性进行计算，并返回一个新的值。计算属性在模板中可以像普通属性一样使用，但是其值是根据其他属性动态计算得到的。

拥有属性特点的函数（方法）的作用：

1.为普通方法施加了计算属性后，调用该函数不需要加括弧

2. 为普通方法施加了计算属性后，该函数只要被调用过一次，就会在浏览器中产生缓存, 下次再被调用时将直接从缓存调用。

下面是一个简单的例子，展示了普通函数和计算属性的使用方式： 

普通函数：

<body>
    <div id="app">

        <h3>调用add方法: {{ add() }}</h3>
        <h3>调用add方法: {{ add() }}</h3>

    </div>
    <script type="module">
        //导入computed 
        import { createApp, ref, reactive, computed } from './vue.esm-browser.js'
        createApp({
        setup() {

            // 数据（属性）： 响应式对象
            const data = reactive({
                x: 10,
                y: 20
            })

            // 普通函数（方法）： 
            const add = () => {
                console.log("调用普通的方法add,不做缓存") 
                return data.x + data.y
            }

            return {
                data,
                add,
            }
        }
    }).mount("#app")
    </script>
</body>

 

add 是一个普通函数，每次调用时都会执行函数体内的逻辑来计算返回值，执行了两次，所以调用了两次。

计算属性：

<body>
    <div id="app">

        <h3>第1次调用带有计算属性的sub方法: {{ sub }}</h3>
        <h3>第2次调用带有计算属性的sub方法: {{ sub }}</h3>

    </div>
    <script type="module">
        import { createApp, ref, reactive, computed } from './vue.esm-browser.js'
        createApp({
        setup() {

            // 数据（属性）： 响应式对象
            const data = reactive({
                x: 10,
                y: 20
            })

            // 拥有属性特点的函数（方法）：
            const sub = computed(
                    () => {
                        console.log("调用计算属性的方法sub, 有缓存") 
                        return data.x - data.y
                     }
            )

            return {
                data,
                sub
            }
        }
    }).mount("#app")
    </script>
</body>
</html>

在上述例子中，sub是一个计算属性，它根据 data的值计算得到，每次 data发生变化时，sub会重新计算。 

计算属性的好处在于它们可以缓存计算结果，并且只在相关的依赖（即被访问的响应式数据）发生变化时进行重新计算，避免重复计算。

计算属性对于需要根据多个数据属性派生出新的数据的场景非常有用，可以简化代码并提高效率。但太多的计算属性会产生大量缓存，增加访问用户的负担，所以计算属性并不是越多越好的

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值