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

最新推荐文章于 2024-07-12 18:36:18 发布
最新推荐文章于 2024-07-12 18:36:18 发布
阅读量132 收藏 1
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhmonkey/article/details/118752099
版权
本文详细探讨了Vue.js中的watch监听、computed计算属性、对象的动态添加与删除属性以及生命周期方法的运用。通过实例展示了如何监听数据变化、计算属性的get和set方法、动态添加属性的$set和$delete方法，以及组件的各个生命周期钩子函数。同时，还介绍了过滤器filter的使用，包括数值格式化、字符串处理等。
摘要由CSDN通过智能技术生成

文章目录

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()}}  
	<!-- 如果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); //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>
    <!-- 过滤器  文本格式化 -->
    <!-- 过滤器可以用到在表达式中{{}}    用在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.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>
monkeyhlj
关注
专栏目录
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1999
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
尚硅谷VUE技术教程(基于vue2.5录制，vue.js快速入门)----学习笔记
weixin_54362826的博客
04-06 1121
参考：尚硅谷教程 目录一、介绍二、基本认识1. 遵循MVVM模式2. 创建一个Vue实例 一、介绍 Vue是一套渐进式框架，用来动态构建用户界面(view)。 二、基本认识 1. 遵循MVVM模式 M：model，数据对象（data中的数据） V：view，模板页面（页面中所显示的内容），是动态的html页面， VM：VueModel，new 的Vue对象，也就是vm对象 2. 创建一个Vue实例 <body> <div id="app"><!-- view 所要显示的
vue生命周期学习（watch跟computed）
qq_45217544的博客
07-16 1065
1、watch钩子函数监听数据的变化 watch 的一个特点是，最初绑定的时候是不会执行的（firstName的值在data定义时赋予的值），要等到 firstName 改变时才执行监听计算。 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el:
框架技术Vue ---- watch监听、组件生命周期和数据共享、全局注册属性_vue生命周期watch
最新发布
2301_82244509的博客
07-12 792
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
vue学习day05-watch侦听器（监视器）、Vue生命周期和生命周期的四个阶段、、工程化开发和脚手架Vue cli
2301_76648183的博客
07-10 1262
如果已经安装或者安装了nvm，又或者初次安装，但是出现（vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的 名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一 次。所在位置 行:1 字符: 1 + vue create vue-demo1 + ~~~ + Category）Vue cli是Vue官方提供的一个全局命令工具，可以帮助我们快速创建一个标准化基础架子。（或者安装了nvm的），可以尝试一下这个方法。Vue生命周期过程中，会。（没产生，先刷新一下）
组合式API中的watch、生命周期函数、父子通信、模板引用以及provide和inject跨层传递
m0_73805336的博客
12-10 543
侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听。
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
10-17
Vue的生命周期包括从创建到销毁的各个阶段，如`created()`和`mounted()`用于初始化操作，`beforeDestroy()`则用于执行销毁前的清理工作。 Vue还支持自定义过滤器，可以对数据显示前进行格式化处理。定义过滤器使用`...
Vue基础知识学习笔记
m0_46400711的博客
07-13 305
vue基础知识学习笔记 常用指令、计算属性、生命周期、动画、自定义过滤器、组件、路由、vue-cli等等。
Vue学习笔记（尚硅谷天禹老师）
m0_67391907的博客
03-06 1254
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
框架技术Vue ---- watch监听、组件生命周期和数据共享、全局注册属性
a23452的博客
03-15 3495
Vue框架 内容管理watch侦听器基本使用 watch结点使用watch检测用户名是否可用immedidate选项---- watch的数据项变为对象deep配置项监控单个属性的变化；直接'obj.pro'计算属性和watch侦听器组件生命周期监听组件的不同时刻created mounted unmounted监听组件的更新updated组件主要生命周期函数 应用组件中所有的生命周期函数组件间数据共享父子组件之间的数据共享兄弟组件之间的数据共享 EventBus后代关系组件之间的数据共享父结点使用prov
vue2.0生命周期、计算属性、watch的执行顺序
weixin_33806300的博客
08-04 1912
created(){ console.log('created') this.PageIndex=2 }, mounted() { this.getAppData() console.log('mounted') }, computed: { apps(...
vue简单学习-路由、生命周期、计算属性和watch
vivid9527的博客
12-31 184
1、路由Router 概念 路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。 简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。 路由不包含在vue中，是一个插件，需要单独下载。 官方地址：https://router.vuejs.org/zh/ 地址：https://unpkg.com/vue-router@3...
computed计算属性、watch侦听器、生命周期
m0_51195865的博客
03-28 451
监听from、q、to变化时，都要重新翻译，则可以直接监听一个对象。如果监听对象中的属性，不能直接当函数名，需要加上引号。多次使用计算属性，计算属性方法也只执行一次，计算属性不能通过双向绑定修改（默认不能改）调用计算属性的方法不能加()，执行一些业务逻辑或异步操作。每个阶段对应两个钩子函数。
最新版本Vue3的学习笔记-第三章(下部)
apple_51927114的博客
12-25 1131
什么是hook？—— 本质是一个函数，把setup函数中使用的进行了封装，类似于vue2.x中的mixin。自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。useSum.ts})//向外部暴露数据useDog.ts// 方法try {// 发请求// 维护数据// 处理错误// 挂载钩子getDog()})//向外部暴露数据当前求和为：{{sum}}
vue生命周期以及watch 、computed 、methods 执行顺序
weixin_53663431的博客
03-01 2272
vue生命周期以及watch 、computed 、methods 执行顺序
Vue3.0 —— watch、生命周期函数、teleport、props的基本语法使用
z_2532040197的博客
09-22 1263
Vue3.0 中watch、生命周期函数、teleport、props的基本语法使用
Vue watch computed 生命周期执行顺序
qq_48046110的博客
11-03 4452
Vue watch computed 生命周期执行顺序
vue生命周期、computed属性和 method方法、watch 属性区别
点点滴滴的博客
01-29 7782
实例生命周期钩子函数 beforeCreate 组件实例刚被创建，组件属性计算之前，如data属性等 created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在 beforeMount 模板编译/挂载之前 mounted 模板编译/挂载之后 beforeUpdate 组件更新之前 updated 组件更新之后 activat
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值