文章目錄

• • Vue學習（watch、computed、生命周期）- 學習筆記
  • • watch 監聽
    • computed 計算屬性
    • set---動態添加屬性 delete---刪除
    • 生命周期
    • filter 過濾器

Vue學習（watch、computed、生命周期）- 學習筆記

watch 監聽

<template><div><input type = "text" v-model="name" />姓名{{changeName}}<input type = "text" v-model="obj.name" />姓名2</div> </template><script> export default {data () {return {name:'',changeName:'',obj:{name:''}}},methods:{action(newValue,oldValue){}},watch:{// 幾種寫法name:function(newValue,oldValue){this.changeName = oldValue;},// name(newValue,oldValue){// }// 'name'(newValue,oldValue){// }//'name':'action' //值可以為方法名//監聽對象// 'obj.name'(newValue,oldValue){// this.changeName = oldValue;// },// obj(newValue,oldValue){ //不會改變// this.changeName = oldValue;// },obj:{handler:(newValue,oldValue)=>{ //默認的執行函數//this.changeName = newValue; //this指向出錯console.log('1111')},deep:true //深度監聽 false handler函數不執行}} } </script>

computed 計算屬性

<template><div>您購買了<input type="text" v-model="info.name"/>單價<input type="text" v-model="info.price"/>元數量<input type="text" v-model="info.count"/>份<p>折扣({{sale}})配送費({{freight}})元</p><h1>總價：{{info.price*info.count*sale +freight}}</h1><h1>總價：{{total}}</h1><h1>總價：{{num2}}</h1><h1>總價：{{num3}}</h1><button @click="change()">改變num3</button></div> </template><script> export default {data () {return {info:{id:1,price:15,name:'套餐A',count:1},sale:0.8, //折扣freight:5, //配送費data:0,num:100}},methods:{change(){this.num = 999;}},computed:{total(){if(this.info.count >5){return this.info.price*this.info.count*this.sale}else {return this.info.price*this.info.count*this.sale +this.freight} },num2(){return this.num+this.info.count ;},//完整的寫法num3:{//讀取值會觸發getget:function(){return this.num },//修改值會觸發setset:function(val){this.num = val;}}} } </script>

監聽與計算屬性的區別：監聽是針對特定某個值，對其變化進行監聽，計算屬性是包含的值發生變化則都會變化。

計算屬性和方法的比較：

<template><!-- 和方法的比較 --><input type='text' v-model="input" @input ="getData()"/>{{getInput}}{{getData()}} <!-- 如果input發生變化，方法每一次都會執行，但若input輸入的值和原來一樣，則不會被觸發 --></div> </template><script> export default {data () {return {input:''}},methods:{getData(){console.log('方法');return this.input}},computed:{getInput(){console.log('計算屬性');return this.input}, } </script>

set—動態添加屬性 delete—刪除

<template><div><!-- 不會觸發視圖更新 --><h1>{{obj.name}}</h1><h1>{{obj.age}}</h1><button @click="add()">添加</button><button @click="del()">刪除</button></div> </template><script> export default {data () {return {obj:{id:1,name:"abc"}}},methods:{add(){//動態添加的屬性值 不會觸發視圖更新//this.obj.age = 20;this.$set(this.obj,'age',20); //雙向數據 響應式數據},del(){// delete this.obj.age;this.$delete(this.obj,'age'); //雙向數據 響應式數據}} } </script>

生命周期

<template> </template> <script> //這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等） //例如：import 《組件名稱》 from '《組件路徑》' export default {name: "sensor",//import 引入的組件需要注入到對象中才能使用components: {},props: {}, //組件傳參取值data() {//這里存數據return {}};},//計算屬性 類似于data概念computed: {},//監控data中數據變化watch: {},//方法集合methods: {},//聲明周期 - 創建完成（可以訪問當前this實例）created() {},//生命周期 - 掛載完成（可以訪問DOM元素）mounted() {},beforeCreate() {}, //生命周期 - 創建之前beforeMount() {}, //生命周期 - 掛載之前beforeUpdate() {}, //聲明周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 銷毀之前destroyed() {}, //生命周期 - 銷毀之后activated() {} //緩存keep-alive }; </script> <style scoped> /* @import "../../../styles/table-common.less"; */ </style>

理解生命周期，理解鉤子函數：

<template><div><div id="my">{{message}}<input type="text" v-model='message' /></div></div> </template><script> export default {data () {return {message : "hello world" }},//beforecreate：el 和 data 并未初始化 //created:完成了 data 數據的初始化，el沒有//beforeMount：完成了 el 和 data 初始化 //mounted ：完成掛載//具體怎么用呢，通俗一些//beforecreate : 舉個例子：可以在這加個loading事件 //created ：在這結束loading，還做一些初始化，實現函數自執行 //mounted ： 在這發起后端請求，拿回數據，配合路由鉤子做一些事情//beforeDestroy： 你確認刪除XX嗎？// destroyed ：當前組件已被刪除，清空相關內容beforeCreate: function () { //beforeCreate:剛剛new Vue()之后，這個時候，數據還沒有掛載呢，只是一個空殼console.group('beforeCreate 創建前狀態===============》');console.log("創建前狀態", "el : " + this.$el); //undefinedconsole.log("創建前狀態", "data : " + this.$data); //undefined console.log("創建前狀態", "message: " + this.message) //undefined},created: function () { //created:這個時候已經可以使用到數據，也可以更改數據,在這里更改數據不會觸發updated函數,一般可以在這里做初始數據的獲取console.group('created 創建完畢狀態===============》');console.log("創建完畢狀態","el : " + this.$el); //undefinedconsole.log("創建完畢狀態","data : " + this.$data); //已被初始化 console.log("創建完畢狀態","message: " + this.message); //已被初始化},beforeMount: function () { //beforeMount：虛擬dom已經創建完成，馬上就要渲染,在這里也可以更改數據，不會觸發updated 接下來開始render，渲染出真實domconsole.group('beforeMount 掛載前狀態===============》');console.log("掛載前狀態", "color:red","el : " + (this.$el)); //已被初始化console.log(this.$el); // 發現el還是 {{message}}，這里就是應用的 Virtual DOM（虛擬Dom）技術，先把坑占住了。到后面mounted掛載的時候再把值渲染進去。console.log("掛載前狀態", "color:red","data : " + this.$data); //已被初始化 console.log("掛載前狀態", "color:red","message: " + this.message); //已被初始化 },mounted: function () { //mounted：此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了console.group('mounted 掛載結束狀態===============》');console.log("掛載結束狀態", "color:red","el : " + this.$el); //已被初始化console.log(this.$el); //{{}}渲染console.log("掛載結束狀態", "color:red","data : " + this.$data); //已被初始化console.log("掛載結束狀態", "color:red","message: " + this.message); //已被初始化 },beforeUpdate: function () {console.group('beforeUpdate 更新前狀態===============》');console.log("更新前狀態", "color:red","el : " + this.$el);console.log(this.$el); console.log("更新前狀態", "color:red","data : " + this.$data); console.log("更新前狀態", "color:red","message: " + this.message); },updated: function () {console.group('updated 更新完成狀態===============》');console.log("更新完成狀態", "color:red","el : " + this.$el);console.log(this.$el); console.log("更新完成狀態", "color:red","data : " + this.$data); console.log("更新完成狀態", "color:red","message: " + this.message); },beforeDestroy: function () {//beforeDestory:銷毀前執行（$destroy方法被調用的時候就會執行）,一般在這里善后:清除計時器、清除非指令綁定的事件等等...console.group('beforeDestroy 銷毀前狀態===============》');console.log("銷毀前狀態", "color:red","el : " + this.$el);console.log(this.$el); console.log("銷毀前狀態", "color:red","data : " + this.$data); console.log("銷毀前狀態", "color:red","message: " + this.message); },destroyed: function () { //destroyed:組件的數據綁定、監聽...都去掉了,只剩下dom空殼，這里也可以善后console.group('destroyed 銷毀完成狀態===============》');console.log("銷毀完成狀態", "color:red","el : " + this.$el);console.log(this.$el); console.log("銷毀完成狀態", "color:red","data : " + this.$data); console.log("銷毀完成狀態", "color:red","message: " + this.message)}, } </script><style> button._color {color:#f60; } </style>

filter 過濾器

<template><div><!-- 過濾器 文本格式化 --><!-- 過濾器可以用到在表達式中{{}} 用在v-bind -->{{3.14159 | number(3)}}<input type="text" v-model="input" /><h1>{{input |addZero}}</h1><!-- 用在v-bind --><div><select v-model="selected"><option value='0'>紅色</option><option value='1'>藍色</option><option value='2'>綠色</option></select></div><div :class="selected |colorFilter">標題</div><ul><li v-for="(v,i) in lists" :key="i">{{v.num | numFilter}}</li></ul><!-- 時間戳 --><h1>{{curTime |dateFilter}}</h1><!-- 添加省略號 --><h1>{{input | toShortShow(5)}}</h1></div> </template><script> export default {data () {return {input:0,selected:'0',lists:[{id:1,name:1,num:1},{id:2,name:2,num:2},{id:3,name:3,num:3},{id:4,name:4,num:4}],curTime:1590583800}},filters:{ //過濾器 number(data,n){ //data=====3.14159return data.toFixed(n)},addZero(data){return data<10?'0'+data:data;},colorFilter(data){switch(data){case '0':return 'red';case '1':return 'blue';case '2':return 'green';default:return data}},numFilter(data){switch(data){case 1:return '發貨中';case 2:return '正在送貨';case 3:return '送貨完成';default:return data}},dateFilter(data){var d = new Date(data*1000);return d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate();},toShortShow(data,n){if(data.length>=n){return data.substr(0,n)+'...'}else{return data}}} } </script><style> .red{color:red; } .blue{color:blue; } .green{color:green; } </style>

總結

以上是生活随笔為你收集整理的Vue学习（watch、computed、生命周期、filter）- 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。