生命周期
什么是生命周期
Vue的生命周期, 就是Vue实例从创建到销毁的过程.
完整过程包含: 开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁
vue生命周期含8步骤（有8个沟子函数）：创建、挂载、更新、销毁
created() 创建后
mounted() 挂载后
生命周期流程
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="message"> <br/> 原始数据：{{message}} <br/> </div> </body> </html> <script> let vue = new Vue({ el: '#app', data:{ message: 'abc' }, beforeCreate() { console.info('1.创建前') }, created() { console.info('2.创建') }, beforeMount() { console.info('3.挂载前') }, mounted() { //页面加载成功 console.info('4.挂载') }, beforeUpdate() { console.info('5.更新前') }, updated() { console.info('6.更新') }, beforeDestroy() { console.info('7.销毁前') }, destroyed() { console.info('8.销毁') }, }) //销毁 // vue.$destroy() </script>
计算属性computed计算属性与监听器
计算属性computed
存在的问题
- 插值表达式, 可以完成表达式的计算,如果逻辑复杂时,将很难维护. 例如:
<div id="app"> {{ message.split('').reverse().join('') }} </div>
基本使用
- Vue计算属性computed就是用来处理复杂逻辑的. 当data区域的数据变更是,将进行自动计算.
<script> new Vue({ el: '#app', computed: { 属性名(){ // 功能 return 返回值; } }, }) </script>
案例：字符串倒排
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{showMessage}} </div> </body> </html> <script> new Vue({ el: '#app', data: { message : 'abcd' }, computed: { showMessage(){ return this.message.split('').reverse().join('') } }, }) </script>
computed和method的区别
- 计算属性，用于实时计算，只要数据发生了更改才计算。缓存计算结果。
- 方法，每次调用都执行
案例：购物车
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> <style> a { text-decoration: none; /*a标签取消下划线*/ font-size:20px; } </style> </head> <body> <div id="app"> <table border="1" width="500"> <tr> <td>编号</td> <td>标题</td> <td>单价</td> <td>购买数量</td> <td>小计</td> </tr> <tr v-for="(book,index) in cart" :key="index"> <td>{{index+1}} </td> <td>{{book.title}} </td> <td>{{book.price}} </td> <td> <a href="#" @click.prevent="book.count > 0 ? book.count-- : 0">-</a> {{book.count}} <a href="#" @click.prevent="book.count++">+</a> </td> <td>{{book.price * book.count}} </td> </tr> <tr> <td colspan="3"></td> <td colspan="2">总价：{{totalPrice}} </td> </tr> </table> </div> </body> </html> <script> new Vue({ el: '#app', data: { cart :[ { title : '葵花籽真经', price : 32, count : 0 }, { title : '程序员的修养', price : 66, count : 0 } ] }, computed: { totalPrice() { var sum = 0 this.cart.forEach( (book) => { sum += book.price * book.count; }) return sum; } } }) </script>
监听器watch
什么是监听器
监听数据的变化
<script> new Vue({ el: '#app', data: { 变量: '', }, watch: { 变量: function(新数据, 旧数据) { }, 变量2：{ handler: function (val, oldVal) { /* ... */ }, deep: true /*监听对象属性，不论嵌套多深*/ } }, }) </script>
基本语法
案例：拆分姓名
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 请输入姓名：<input type="text" v-model="username"> <br/> 姓：{{firstname}} <br/> 名：{{secondname}} </div> </body> </html> <script> new Vue({ el: '#app', data: { username: '', firstname: '', secondname: '' }, watch: { username: function(val, oldVal) { if(val){ this.firstname = val.substring(0,1) this.secondname = val.substring(1) } else { this.firstname = '' this.secondname = '' } } }, }) </script>
案例：拆分姓名
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
请输入姓名：<input type="text" v-model="user.username"> <br/>
姓：{{firstname}} <br/>
名：{{secondname}}
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
user: {
username: '',
},
firstname: '',
secondname: ''
},
watch: {
user: {
handler: function(val, oldVal) {
if(val.username){
this.firstname = val.username.substring(0,1)
this.secondname = val.username.substring(1)
} else {
this.firstname = ''
this.secondname = ''
}
},
deep: true
}
},
})
</script>
