Vue学习（watch、computed、生命周期、filter）- 学习笔记

电玩女神 2023-01-23 12:57 152阅读 0赞

### 文章目录 ###

*   *  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:{ //读取值会触发get get:function(){ return this.num }, //修改值会触发set set:function(val){ this.num = val; } } } } </script>

**监听与计算属性的区别：监听是针对特定某个值，对其变化进行监听，计算属性是包含的值发生变化则都会变化。**

**计算属性和方法的比较：**

<template>
    	
    	<input type='text' v-model="input" @input ="getData()"/>
    	{
       {getInput}}
    	{
       {getData()}}  
    	
      </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); //undefined console.log("创建前状态", "data : " + this.$data); //undefined console.log("创建前状态", "message: " + this.message) //undefined }, created: function () { //created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数,一般可以在这里做初始数据的获取 console.group('created 创建完毕状态===============》'); console.log("创建完毕状态","el : " + this.$el); //undefined console.log("创建完毕状态","data : " + this.$data); //已被初始化 console.log("创建完毕状态","message: " + this.message); //已被初始化 }, beforeMount: function () { //beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated 接下来开始render，渲染出真实dom console.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>
        
        
        {
       {3.14159 | number(3)}}
        <input type="text" v-model="input" />
        <h1>{
       {input |addZero}}</h1>
    
         
          <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.14159 return 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>