lovecoding
/
VIP26


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <p>
                姓：<input type="text" v-model="newName">
            </p>
            <p>
                名：<input type="text" v-model="liName">
            </p>

            <p>姓名是: {{myName}}</p>
        </div>
        <p>名字是:{{firstName + lastName}}</p>
        <p>我们的名字是:{{ getFullName() }}</p>
        <p>{{full}}</p>
        <!-- 
            计算属性
         -->
         <h1 style="color: red;">我们的名字是:{{fullName}}</h1>
         <p>
            1.最好大量的去使用计算属性 计算属性有缓存 同步操作 处理计算量不大的数据
         </p>
         <p>
            2.像数据进行更新(衍生数据),最好使用计算属性
         </p>
         <p>
            3.如果计算量大 消耗性能 异步操作 使用侦听器(watch)
         </p>
         <p>
            4.watch 不进行缓存 计算量大的操作 异步操作
         </p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                firstName: '卢勃玮',
                lastName: '张振博',
                full: '马琛',
                newName: '马',
                liName: '琛',
                
            },
            computed:{
                fullName() {
                    console.log("获取get的值")
                    // 抛出数据 return 返回值；
                   return this.firstName + this.lastName + this.full;
                },
                myName:{
                    // 走的是getter 实际get方法
                    get(){
                        return this.newName + '-' + this.liName;
                    },
                    set() {
                        this.newName = "天气";
                        this.liName = "真好";
                    }
                }
            },
            // watch:{
            //     // 初次进入页面 并不监听 发生更改才会开启监听
            //     newName(newValue,oldValue) {
            //         this.full = newValue + this.liName; 
            //     },
            //     liName(newValue,oldValue) {
            //         this.full = this.newName + newValue;
            //     },
            //     // 如果我们想 初始化页面进行监听 
            //     // 补充知识点
            //     // newName: {
            //     //     // 开启监听 ， 深度监听
            //     //     immediate:true,
            //     //     deep: true,
            //     //     handler() {
            //     //     }
            //     // }
            // },
            // 自定义的方法
            methods: {
                getFullName() {
                    // this => Vue实例
                   return this.firstName + this.lastName + this.full;
                }
            },
        })
        // 解决set失效问题
        vm.myName = '';
    </script>
</body>
</html>