computed:{ [key: string]: Function | { get: Function, set: Function } }

<div id="app">
    <!--使用表達(dá)式的方式-->
    <p v-text="originalPrice - discountPrice"></p>
    <!--使用計(jì)算屬性的方式-->
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
             id:1,
            originalPrice:1200,
            discountPrice:200,
        },
        //計(jì)算屬性
        computed: {
            // 把日期換成 常見(jiàn)規(guī)格格式的字符串。
            currentPrice: function () {
                return "當(dāng)前價(jià)格:" + (this.originalPrice - this.discountPrice);
            }
        }
    });

<div id="app1">
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            id: 1,
            originalPrice: 1200,
            discountPrice: 200,
        },
        //計(jì)算屬性
        computed: {
             cache:false,
            // 把日期換成 常見(jiàn)規(guī)格格式的字符串。
            currentPrice: {
                get: function () {
                    return "當(dāng)前價(jià)格:" + (this.originalPrice - this.discountPrice);
                },
                // 注意必須要傳遞參數(shù),否則沒(méi)有意義
                set: function (value) { 
                    //執(zhí)行自定義的一下操作
                    this.discountPrice = value
                }
            }
        }
    });
</script>
<!-- 
在 console 中 輸入 app.currentPrice=300 
1> 先執(zhí)行g(shù)et方法改變discountPrice的值
2> 因?yàn)閿?shù)據(jù)發(fā)生改變了 所以會(huì)重新計(jì)算當(dāng)前的價(jià)格, 執(zhí)行g(shù)et方法
-->

<!-- 響應(yīng)式依賴 -->
<script>
    var vm = new Vue({
      data: {
        // 聲明 message 為一個(gè)空值字符串
        message: ''
      },
    })
    // 響應(yīng)式
    vm.message = 'Hello!'

    vm.v="非響應(yīng)式的的值"
</script>

<div id="app">
    <button @click="getMethodsDate">methods</button>
    <button @click="getComputedDate">computed帶緩存</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {
            getMethodsDate: function () {
                console.log(new Date().toLocaleTimeString())
            },
            // 返回computed選項(xiàng)中設(shè)置的計(jì)算屬性——computedDate
            getComputedDate: function () {
                console.log("緩存--->" + this.computedDate)
            }
        },
        computed: {
            computedDate: function () {
                return new Date().toLocaleTimeString()
            }
        }
    })
</script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        data: {
            test: "111",
            user: {
                name: "碼帝",
                address: {
                    city: "大武漢"
                }
            }
        },
        methods: {
            fun: function (val) {
                alert(val)
            }
        },
        watch: {
            // 方法名方式 對(duì)應(yīng) methods中的函數(shù)名
            // test: 'fun',
            // 函數(shù)方式
            test: function (v1, v2) {
                alert("新值" + v1 + "====舊值:" + v2)
            },
            /**
             *什么是深度 例如  data: {test: "111", user: {name: "碼帝" ,address{city:'大武漢'}}
             * user屬性對(duì)應(yīng)值就是深層,一次內(nèi)推
             * 如果我們監(jiān)聽(tīng)的user屬性 當(dāng)user.name屬性發(fā)生改變的時(shí)候 watch監(jiān)聽(tīng)是不到,所有我們這里需要使用深層監(jiān)聽(tīng)
             */
            //
            user: {
                handler: function (val) {
                    alert(val.name)
                },
                // 是否深度監(jiān)聽(tīng) 默認(rèn)是false
                // 如果不設(shè)置為true當(dāng)我們手動(dòng)設(shè)置vm.user.name = "擼帝"的時(shí)候,是監(jiān)聽(tīng)不到的
                deep: true
            },
            /**
             * 或者也可以使用下面的方式來(lái)監(jiān)聽(tīng)
             * 注意鍵值必須是一個(gè)字符串，所以用引號(hào)括起來(lái)
             *
             */

            "user.address.city": function (val) {
                alert(val)
            }
        }
    });
    vm.test = '333';
    vm.user.name = "擼帝";
    vm.user.address.city = '長(zhǎng)沙'

<div id="app">
    <input type="text" v-model="search"/>
    <ul>
        <li v-for="result in results" v-text="result"></li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            user:{
                name:"碼帝",
            }
            search: "",
            results: [],
            
        },
        methods: {
          fun: function () {
            alert("111");
          }
        }
        watch: {
         // 使用函數(shù)
            search: function (v1, v2) {
             console.log('新值: %s, 舊值: %s', v1, v2)
                this.results.push(v1)
            }
        }
        
    })
</script>