计算属性
概念：基于现有的数据，计算出来的新属性。依赖数据变化，。自动重新计算。 语法：
- 声明在computed配置项中，一个计算属性对应一个函数
- 使用起来和普通属性一样使用{{计算属性名}}
<div id="app">
<h3>小黑的礼物</h3>
<table>
<tr>
<th>名字</th>
<th>数量</th>
</tr>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.name}}</td>
<td>{{item.num}}</td>
</tr>
</table>
<p>礼物总数:{{totalCount}}个</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'篮球',num:1},
{id:2,name:'篮',num:2},
{id:3,name:'球',num:3}
]
},
computed:{
totalCount(){
let total= this.list.reduce((sum,item)=>sum+item.num ,0)
return total
}
}
})
</script>
watch
watch倾听器（监视器）
作用：监视数据变化，执行一些业务逻辑或异步操作。
语法： 1.简单写法->简单类型数据，直接监视 2.完整写法->添加额外配置项
<script>
data:{
words:'苹果',
obj:{
words:'苹果'
}
},
watch:{
//该方法会在数据变化时，触发执行
数据属性名（newValue,oldValue）{
一些业务逻辑 或异步操作
},
'对象.属性名'(newValue,oldValue){
一些业务逻辑或异步操作。
}
}
</script>
例
<script>
const app = new Vue({
el: '#app',
data: {
obj: {
words: ''
//需要被翻译的文本
}
},
watch:{
//该方法会在数据变化时调用执行
'obj.word'(newValue) {
//防抖：延迟执行——>一段时间内没有再次触发，才执行
clearTimeout(this.timer)
setTimeout((async )=>{
const res = axios({
parama: {
word: newValue
}
}
)
this.result = res.data.data
},1000)
}
}
})
</script>
完整写法
添加额外配置项
- deep:true对复杂类型深度监视
- immediate:ture 初始化立刻执行一次handler方法
需求：输入内容，修改语言，都实时翻译
<div id="app">
<!-- 条件选择框 -->
<div class="query">
<span>翻译成语言</span>
<select v-model="obj.lang">
<option value="italy">意大利</option>
<option value="english">英语</option>
<option value="geman">德语</option>
</select>
</div>
<!-- 翻译框 -->
<div class="box">
<div class="input-wrap">
<textarea v-model="obj.words"></textarea>
<span><i>文档翻译</i></span>
</div>
<div class="output-wrap">
<div class="transbox">{{result}}</div>
</div>
</div>
</div>
<script src="./vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
obj:{
word:'苹果',
lang:'italy'
},
result:'',
},
// watch:{
// 数据属性名:{
// deep:true,//深度监视
// handler(newValue){
// }
// }
// }
watch:{
obj:{
deep:true,
immediate:teuw,
handler(newValue){
clearTimeout(this.timer)
this.timer=setTimeout(async()=>{
const res=await axios({
url:'',
params:{
word:newValue
}
})
this.result=res.data.data
})
}
},
// 'obj.words'(newValue){
// clearTimeout(this.timer)
// this.timer=setTimeout(async()=>{
// const res=await axios({
// url:'',
// params:{
// word:newValue
// }
// })
// this.result=res.data.data
// })
// },
}
})
</script>
生命周期
vue生命周期：一个Vue实例从创建到销毁的整个过程 生命周期的四个阶段：1创建2.挂载3.更新 4，销毁
1.创建 响应式数据 "发送初始化渲染请求" data:{ title:'计算器'， count:100 }
2.挂载 渲染模板 "操作dom"
<div id="app">
<h3>{{title}}</h3>
<div>
<button>-</button>
<span>{{count}}</span>
<button>+</button>
</div>
</div>
3.更新 数据更新，更新视图 "不断循环更新视图，修改数据"
4.销毁
Vue生命周期函数(钩子函数) Vue生命周期过程中，会 自动运行一些函数，被称为【生命周期钩子->让开发者在【特定阶段】运行自己的代码】 每个阶段都有两个钩子函数
created:fasong初始化渲染请求 mounted:操作dom before:释放Vue以外的资源(清楚定时器，延时器)
<div id="app">
<h3>{{title}}</h3>
<div>
<button @click="count--">-</button>
<span>{{count}}</span>
<button @click="count++">+</button>
</div>
</div>
<script src="./vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
count:100,
title:'计数器'
} ,
beforeCreate(){
console.log(' beforeCreate响应式数据准备好之后',this.count)
},
created(){console.log('created响应式数据准备好之后',this.count)
//this.数据=请求回来的数据
//可以开始发送初始化渲染的请求了
},
//2.挂载阶段（渲染模板）
beforeMount(){
console.log('beforeMount模板渲染之前',document.querySelector('h3').innerHTML)
},
mounted(){
console.log('mounted模板渲染之后',document.querySelector('h3').innerHTML)
},
//3.更新阶段
beforeUpdata(){
console.log('beforeUpdata 数据修改了,视图还没更新',querySelector('span').innerHTML)
},
updatad(){
console.log('updata数据修改了,视图更新了',querySelector('span').innerHTML)
},
//4.卸载阶段
beforeDestory(){
console.log()
},
destroyed(){
console.log()
}
})
</script>
