vue学习1：计算属性，监视属性以及v-model

李喵喵爱豆豆

已于 2023-02-03 14:15:02 修改

阅读量591

点赞数

分类专栏： VUE javascript学习文章标签： vue.js 学习 javascript

于 2023-02-03 10:00:00 首次发布

本文链接：https://blog.csdn.net/qq_41040989/article/details/128856193

版权

javascript学习同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

vue学习1：计算属性，监视属性以及v-model

计算属性-computed
监视属性
- 深度监视
- Computed与watch的区别
Vue收集表单数据v-model

计算属性-computed

之前的插值语法和方法绑定都可以实现计算属性的功能，但是效率不高

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例——methods</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓:<input type="text" v-model="firstname"><br><br> 
        名:<input type="text" v-model="lastname"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.ProductionTip=false
        let vm=new Vue(
            {
                el:'#root',
                data:{
                    firstname:"Li",
                    lastname:"Ming"
                },
                computed:{
                    fullName:{
                        //当有人初次读取fullName时，get就会调用
                        //所依赖的数据发生变化的时候,get就会调用
                        get(){
                            return this.firstname+'-'+this.lastname
                        },
                        //当fullname被修改时，set被调用
                        set(value){
                            const arr=value.split('-')
                            this.firstname=arr[0]
                            this.lastname=arr[1]
                            return value
                        }
                    }
                }
            }
        )
    </script>
</body>
</html>

总结

定义：要用的属性不存在，要通过已有属性计算得到；
原理：底层借助了Object.defineproperty方法提供的getter和setter;
get函数什么时候执行？
- 初次读取的时候会执行一次；
- 当依赖的数据发生变化的时候会再次调用；
优势：和methods实现相比，内部存在缓存机制（复用），效率更高，调试方便；
备注：
- 计算属性最终会出现在vm上，直接读取使用；
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时以来的数据发生变化；

监视属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            computed:{
                info:{get(){
                    return this.isHot?'炎热':'凉爽'
                }}
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            watch:{
                isHot:{
                    immediate:true,//初始化时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时
                    handler(newValue,oldValue){
                        console.log("isHot发生了改变",newValue,oldValue)
                    }
                }
            }
        })
    </script>
</body>
</html>

深度监视

deep:true

总结

深度监视
- Vue中的watch默认不监测对象内部的改变（一层）；
- 配置deep:true可以监测对象内部的改变（多层）；
备注：
- Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以；
- 使用watch时候根据数据的具体结构决定是否采用深度监视；

Computed与watch的区别

computed能完成的功能，watch都可以完成；
watch能完成的功能，computed不一定能完成，例如：watch可以执行异步操作；
两个重要的小原则：
- 所被vue管理的函数，最好写成普通函数的形式，这样this的指向才是vm或者组件实例对象；
- 所有不被vue管理的函数（定时器的回调，ajax的回调）最好写成箭头函数的形式，这样this的指向才是vm或者组件实例对象；

Vue收集表单数据v-model

总结

若：<input type="text"/> ，则v-model收集的就是value值，用户输入就是value值；
若：<input type="radio"/> ,则v-model收集的就是value值，且要给标签配置value值；
若：<input type="checkbox"/>
- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 配置input的value值：
  - v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - v-model的初始值是数组，那么收集的就是value组成的数组；
    备注
    v-model有三个修饰符：