提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【Vue 快速入门系列】姓名案例几种实现方法(插值语法、函数语法、计算属性的使用、计算属性原理剖析)

Vue案例属性方法计算原理入门 实现
2023-09-27 14:20:14 时间

文章目录

前言

本篇案例由插值语法，methods中的函数引出Vue中一个非常重要的概念：计算属性。案例实现的是有两个输入框，一个是名，一个是姓，经过计算将姓名连接起来展示在dom元素上，并且在input框内的数据改变时dom展示也进行相应的改变。实现的结果如下：

在这里插入图片描述

插值语法实现

使用之前介绍过的双向数据绑定，在收集到数据之后将其展示在dom元素内。

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <input v-model="fontname">
        <hr>
        <input v-model="lastname">
        <hr>
        <p>{{fontname}}-{{lastname}}</p>
    </div>
</body>
<script>
    let vm= new Vue({
        el:"#demo",
        data:{
            fontname:"张",
            lastname:"三"
        }
    })
</script>
</html>

methods实现

这里的话是在插值语法处调用函数，实现的具体逻辑在函数内部。相对于前一种方法，
简化了dom元素内的逻辑（实际生产过程中一定不要dom元素内的逻辑过于复杂）

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <input v-model="fontname"><hr>
        <input v-model="lastname"><hr>
        <!-- 插值语法在使用函数的时候必须显式的调用，否则将会打印函数的信息 -->
        <p>不加括号的效果：{{pick}}</p><hr>
        <!-- 这里得到的是正常的返回值 -->
        <p>加括号的效果：{{pick()}}</p>
    </div>
</body>
<script>
    let vm= new Vue({
        el:"#demo",
        data:{
            fontname:"张",
            lastname:"三"
        },
        methods:{
            pick(){
                // 这里的this指向的是vm
                return this.fontname+"-"+this.lastname
            }
        }
    })
</script>
</html>

计算属性实现

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
	   必须要实现getter函数，否则找不到计算属性的值
3.get函数什么时候执行？
        (1).初次读取时会执行一次。
        (2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
     1.计算属性最终会出现在vm上，直接读取使用即可。
     2.如果计算属性要被修改，那必须写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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <input v-model="fontname"><hr>
        <input v-model="lastname"><hr>
        <p>{{fullname}}</p>
    </div>
</body>
<script>
    let vm= new Vue({
        el:"#demo",
        data:{
            fontname:"张",
            lastname:"三"
        },
        computed:{
        	//这是最完整的写法，实际的写法应该比这个简单的多。（往下看）
            fullname:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get(){
                    return this.fontname+"-"+this.lastname
                },
                set(value){
                    const arr=value.split("-")
                    if (arr.length!=2){
                        alert("不合规范")
                        return 
                    }
                    this.fontname=arr[0]
                    this.lastname=arr[1]
                    alert("属性值修改")
                }
            }
            //简写
            //fullname(){
            //   return this.fontname+"-"+this.lastname
            //}
        }
    })
</script>
</html>

计算属性的原理剖析

刷新机制

在进行属性计算的时候，每当涉及到计算的属性有修改的时候，
系统就会扫描vue实例，并将容器内涉及到计算属性的位置进行更改

缓存机制

计算属性与方法不一样，计算属性有缓存机制，如果在同一页有5处地方用到计算属性
则这5处的值一样（直接在缓存内取值即可），并且只会触发一次属性计算，而如果是函数的话会触发5次函数调用

注意点：计算属性的简写方式没有办法对计算属性进行直接修改，因为简写方法只实现了他的getter方法。而完整的写法可以自定义一些规则，实现对计算属性的修改。

今天的分享就到此结束吧！

在这里插入图片描述

相关文章