1.计算属性如何使用
一般我们在写vue的时候，在模板内写的表达式非常便利，它运用于简单的运算，但是他也有一些复杂的逻辑，包括运算、函数调用等，那么就用到了计算属性，他依赖于data中数据变化的 data 中数据变化的时候 计算属性就会重新执行，视图也会更新。
2.计算属性的 set get 如何使用
每一个计算属性都包含一个getter 和一个setter ；绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter,所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter 都声明。但在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，
3.watch 如何使用
之前做一个H5的项目。需求是当用户在输入完了手机号和验证码之后，登录按钮才可以点击。 在没有使用vue之前，我们可能是通过input的change事件来判断，用户是否输入了内容，然后修改按钮的状态。现在有了vue，就省事了很多，我们只需要在watch中，监听数据模型的值改变即可。在input 上绑定一个v-mode="pass"绑定一个数据名， 在data里写入绑定的事件名，通过watch来监听输入内容的改变，但是如果，监听的是一个对象 里面有一个deep属性可以在选项参数中指定deep：true.也叫深度监听
<body>
<!-- 侦听器 -->
<div id="watch1">
<p>Ask a yes/no question:
<input type="text" v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
var vm = new Vue({
el:'#watch1',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question'
},
watch: {
//如果question发生改变，函数就会运行
question: function(newQuestion, oldQuestion){
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function(){
// 过Lodash限制操作pinlv的函数
//在这里我们希望限制访问yesno。wtf/api的频率
//AJAX请求直到用户输入完毕才会发出。
this.debouncedGetAnswer = _.debounce(this.getAnswer,500)
},
methods: {
getAnswer:function(){
if (this.question.indexOf('?') === -1) {
this.answer = "Questions usually contain a question mark. ;-)"
return
}
this.answer = 'Thinking..'
var vm = this
axios.get('https://yesno.wtf/api').then(function(response){
vm.answer = _.capitalize(response.data.answer)
}).catch(function(error){
vm.answer = 'error! Could not reach the API'
})
}
}
})
</script>4.计算属性和watch的区别
在我们运用vue的时候一定少不了用计算属性computed和watch
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue会在其依赖的任何值导致该计算属性改变时更新DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量，当你定义的变量的值发生变化时，调用对应的方法。
就好在div写一个表达式name，data里写入num和lastname，firstname，在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，而计算属性computed，计算的是Name依赖的值，它不能计算在data中已经定义过的变量。
5.prop验证，和默认值
我们在父组件给子组件传值的时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值的时候，更加准确，prop可以传一个数字，一个布尔值，一个数组，一个对象，以及一个对象的所有属性。
组件可以为props指定验证要求。如果未指定验证要求，Vue会发出警告
比如传一个number类型的数据，用defalt设置它的默认值，如果验证失败的话就会发出警告。