Vue——认识day04_计算属性（案例：实时预览）

1.计算属性之姓名案例之插值语法的实现

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_插值语法实现</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>

    <div id="root">
        姓:<input type="text" v-model="firstName">
        <br><br>
        名:<input type="text" v-model="lastName">
        <br><br>
        <!-- slice(0,3):表示显示三位 -->
        <!-- 全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span> -->
        全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            firstName:'W',
            lastName:'J'
        }
    });
</script>
</html>

2.计算属性之姓名案例之methods语法的实现

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_methods实现</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>

    <div id="root">
        姓:<input type="text" v-model="firstName">
        <br><br>
        名:<input type="text" v-model="lastName">
        <!-- slice(0,3):表示显示三位 -->
         <br><br>
        全名:<span>{{getFullName()}}</span>
        <br><br>
        <!-- <button @click="getFullName(firstName,lastName)">点击获取全名</button> -->
    </div>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            firstName:'W',
            lastName:'J'
        },
        methods: {
            getFullName(firstName,lastName){
                // alert(firstName + '-' + lastName)
                return this.firstName + '-' + this.lastName
            }
        },
    });
</script>
</html>

3.计算属性之姓名案例之计算属性语法的实现

计算属性是Vue中的一种特殊属性，它不存在于数据对象中，而是通过已有属性进行计算得到的。计算属性的实现原理是借助了Object.defineProperty方法提供的getter和setter函数。当初次读取计算属性时，会执行一次getter函数；当依赖的数据发生改变时，会再次调用getter函数。相比于使用methods中的函数来实现相同的计算逻辑，计算属性具有缓存机制，因此效率更高。另外，调试计算属性也更加方便。

需要注意的是，计算属性最终会出现在Vue实例的vm对象上，可以直接读取和使用。如果需要修改计算属性的值，必须在计算属性的set函数中进行响应式的更新，并确保更新的同时引起计算属性所依赖的数据发生变化。

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_计算属性实现</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>

    <div id="root">
        姓:<input type="text" v-model="firstName">
        <br><br>
        名:<input type="text" v-model="lastName">
        <br><br>
        全名:<span>{{fullName}}</span>
        <br><br>
        <!-- 由于计算属性这里有缓存所以之后的都没有调用get 
        但是对于method一直都会调用 
        -->
        全名:<span>{{fullName}}</span>
        <br><br>
        全名:<span>{{fullName}}</span>
        <br><br>
    </div>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'W',
            lastName:'J'
        },
        // 计算属性
        computed:{
            fullName:{
                // get的作用：当有人读取fullName时get就会被调用
                // 返回值就是fullName 的值
                // get的调用时机：
                // 1.初次读取fullName时
                // 2.所依赖的数据发生变化时(防止脏读)
                get(){
                    return this.firstName + '-' + this.lastName
                },
                // set的调用时机：当fullName被修改时
                set(value){
                    console.log('set:' + value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }

    });
</script>
</html>

4.计算属性的简写方式

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_计算属性实现</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</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>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'W',
            lastName:'J'
        },
        // 计算属性
        // 在确定只读不改之后可以采用简写的形式
        computed:{
            // 完整写法
/*             fullName:{
                get(){
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                },
                set(value){
                    console.log('set:' + value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            } */

            //简写
            // 这里的function就相当于get()
            // fullName:function(){
            fullName(){
                console.log('get被调用了')
                return this.firstName + '-' + this.lastName
            }


        }

    });
</script>
</html>

这文章真水！！！