Vue.js 官方文档摘记计算属性_methods: { getanswer: function () { if (this.quest-CSDN博客

计算属性

这里的计算表示的是名词，代表computed选项，被中文翻译到“计算属性”。

可以看作是使用Vue来修改文档中的模板。

基础例子

<div id='example1'>
    <p>这里是基础的模本：{{message}}</p>
    <p>这里是使用计算属性修改的内容：{{reversedMessage}}</p>
</div>

下面是Vue代码

var vm=new Vue({
    el:"#example",
    data:{message:"模板渲染内容"},
    computed:{
        reversedMessage:function(){
            return this.message+"this表示该vm对象本身";
        }
    }
});

computed的缓存 vs Methods

下面用到的methods也是Vue的一个属性，关于该属性的资料看这里。

上面的功能，也可以使用methods方法进行修改，内容如下：

var vm=new Vue({
    el:"#example",
    data:{message:"这里还是一样的"},
    methods:{
        reversedMessage:function(){
            return this.message+"这里是使用methods方法实现的";
        }
    }
});

不过上面不能使用模板语法的方式来调用了，而是要修改成这样的形式：

<p>{{ reversedMessage() }}</p>

可以看到这里像调用函数一样，调用了methods里面的方法。两种实现方法实现了相同的功能，那么本质上有什么区别呢？区别在与缓存。

computed，上面的例子中，reversedMessage与message是绑定在一起的，如果message发生改变，则reversedMessage也会重新计算，如果message不发生改变，则会直接读取上次的缓存值
methods，则是每次都是按照计算方法计算新的值

看你需求了，用哪个。

computed属性 vs Watch属性

watch属性资料

使用该属性可以监视Vue实例上数据的发生改变，所以也可以通过他来设置相应的值，但是其与computed属性的区别，文档里面只是给了一个例子：

<div id='example2'>{{fullName}}</div>

var vm=new Vue({
    el:"#example2",
    data:{
        firstName:"FirstName",
        lastName:"LastName",
        fullName:"FirstName LastName"
    },
    watch:{
        firstName:function(val){
            this.fullName=val+this.lastName;
        },
        lastName:function(val){
            this.fullName=this.firstName+val;
        }
    }
});

但是使用computed方法：

var vm=new Vue({
    el:"#example2",
    data:{
        firstName:"FirstName",
        lastName:"LastName"
    },
    computed:{
        fullName:function(){
            return this.firstName+this.lastName;
        }
    }
});

如果说上面的两个方法有什么区别的话，那么我个人感觉是computed方法不需要管外部数据，只需要关注如何提交一个结果，而不像watch需要关注是那个对象触发了改变。

computed的set

computed属性默认是只有get，但是也支持设置set。

var vm=new Vue({
    fullName:{
        get:function(){
            return "外部调用vm.fullName使就会得到该数据";
        },
        set:function(value){
            this.fullName=value;
        }
    }
});

这样当外部调用vm.fullName='FirstName LastName'时，就会自动调用set后面的函数。

观察 watchers

这个例子是为了说明watch这个属性的好处。

<div id='example3'>
    <p>在下面输入一个问题，会调用一个api进行查询和回答：
        <input v-model='question'>
    </p>
    <p>{{answer}}</p>
</div>

<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
var watcherExampleVM=new Vue({
    el:"#example3",
    data:{
        question:"",
        answer:"先输入内容，然后才能得到结果。"
    },
    watch:{
        question:function(newQuestion){
            this.answer="等待输入完成",
            this.getAnswer()
        }
    },
    methods:function(){
        getAnswer:_.debounce(
            function(){
                var vm=this;
                if(this.question.indexOf("?")===-1){
                    vm.answer="结尾一定要带 ? ";
                    return;
                }
                vm.answer="Thinking...";
                axios.get("https://yesno.wtf/api")
                .then(function(response){
                    vm.answer=_.capitalize(response.data.answer);
                })
                .catch(function(error){
                    vm.answer="API调用失败";
                })
            }
        ),500
    }
});

首先上面那段代码我看不太懂，因为有调用一个新的js框架：Lodash，但是上面那段代码的意思就是，与computed相比，watch能提供更加丰富的内容显示。