Vue_姓名案例多种方式实现（插值语法、methods、computed、watch）

姓名案例

插值语法方式实现

    <div id="root">
        姓：<input type="text" placeholder="请输入姓：" v-model="firstname"/>
        <br/>
        名：<input type="text" placeholder="请输入名：" v-model="lastname" />
        <br/>
        <span>{{firstname}}-{{lastname}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止Vue在启动时生成生产提示
        new Vue({
            el: '#root',
            data() {
                return {
                    firstname:'李',
                    lastname:'明'
                }
            }
        })
    </script>

methods方式

数据发生变化，模板就会被重新解析

<div id="root">
        姓：<input type="text" placeholder="请输入姓：" v-model="firstname" />
        <br />
        名：<input type="text" placeholder="请输入名：" v-model="lastname" />
        <br />
        <span>{{fullName()}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止Vue在启动时生成生产提示
        new Vue({
            el: '#root',
            data() {
                return {
                    firstname: '李',
                    lastname: '明'
                }
            },
            methods: {
                fullName() {
                    return this.firstname + '-' + this.lastname
                }
            }
        })
    </script>

计算属性方式

<div id="root">
        姓：<input type="text" placeholder="请输入姓：" v-model="firstname" />
        <br />
        名：<input type="text" placeholder="请输入名：" v-model="lastname" />
        <br />
        <span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止Vue在启动时生成生产提示
        new Vue({
            el: '#root',
            data() {
                return {
                    firstname: '李',
                    lastname: '明'
                }
            },
            methods: {
                
            },
            computed:{
                fullName() {
                    return this.firstname + '-' + this.lastname
                }
            }
        })
    </script>

watch实现

需要监视姓变没变，名变没变，发现变了就修改全名

<div id="root">
        姓：<input type="text" placeholder="请输入姓：" v-model="firstName" />
        <br />
        名：<input type="text" placeholder="请输入名：" v-model="lastName" />
        <br />
        全名： <span>{{fullName}}</span><br />
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止Vue在启动时生成生产提示
        new Vue({
            el: '#root',
            data() {
                return {
                    firstName: '李',
                    lastName: '明',
                    fullName: '李-明'
                }
            },

            watch: {
                firstName(newValue) {
                    this.fullName = newValue + '-' + this.lastName
                },
                lastName(newValue) {
                    this.fullName = this.firstName + '-' + newValue
                }
            }
        })
    </script>

新需求：当姓发生改变时，全名等1秒后才有反馈（面临异步任务时要使用watch，计算属性不能开启异步任务）

计算属性里面不能开启异步任务去维护数据的，靠的就是返回值，没法做到等一等再返回

！！注意：
定时器所指定的（粉色）函数，不是Vue管理的函数，定时器确实实在Vue管理的函数fullName中开启的，定时器所指定的回调不受Vue 控制的，是浏览器定时器管理模块控制的，最后定时器到点了也是JS引擎帮我们调的，如果不写成箭头函数，this就是window了

computed和watch之前的区别：

1. computed能完成的功能，watch都可以完成
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行一步操作。

两个重要的小原则：（目标：让this指向为vm）

• 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
• 所有不被Vue管理的函数（定时器的回调函数、ajax回调函数等），最好写成箭头函数，这样this的指向才是vm或者组件实例对象

总结：

具体需要返回值到页面上的一般用计算属性 computed
监听数据变化而不需要返回值的时候用侦听属性 watch