• vue之计算属性，属性侦听器，自定义属性，生命周期函数，简单的讲解一下组件

    计算属性

    computed(){} 是一个计算属性

    计算属性computed(){} 和 方法methods(){} 的区别

    计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性

    methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍

    方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

    计算属性的特点

    计算属性使用时当做属性使用

    计算属性设计时当做函数设计(就像es6中的属性)

    当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI，但分以下两种情况

    1. 如果是修改了data中监听的某个的属性值 计算属性就会运行
    2. 如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行
      比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性

    如果是第二种那么把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性就可以了

    <div id="app">
<button @click="changeAdd">加</button>
   <p>{{add}}</p>
   <button @click="changeSub">减</button>
   <p>{{sub}}</p>
</div>
<script>
   new Vue({
       el:"#app",
       data:{
           addnum:10,
           subnum:30,
           addnum1:10,
           subnum1:30,
           addsum:0,
           subsum:0
       },
       methods: {
           changeAdd(){
               this.addnum ++;
               console.log(this.addnum);
           },
           changeSub(){
               this.subnum --;
           }
       },
       computed:{
           add(){
               this.addsum = this.addnum + this.subnum;
               return this.addnum
           },
           sub(){
               this.subsum = this.subnum1 - this.addnum1
               return this.subnum
           }
       }
   })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    这是一个动态的过程，这里就不静态的截图展示了，有兴趣的自己可以去试试

    上述的代码执行后，我们不管点击 加 或者 减，页面的计算结果也都会跟着做着改变，这就是计算属性，它的数据源改变它也会相应的跟着改变

    属性侦听器

    我个人觉得属性侦听器和计算属性功能差不多，计算属性中使用到的数据源发生变化，就会调用computed中对应的方法，而属性监听器也是一样的，属性监听器监听的属性发生了变化，就会调用watch中对应的方法

    watch:{x(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性

    当侦听器监听的属性发生变化时,就会调用watch中对应的方法

    属性侦听器与计算属性比起来，属性监听器的计算效率消耗大

    <div id="app">
<button @click="change">切换姓名</button>
  <p>{{name}}</p>
</div>
<script>
  new Vue({
      el:"#app",
      data:{
          name:"karen",
          flag : true
      },
      methods: {
          
          change(){
              this.flag = !this.flag;
              if (this.flag) {
                  this.name = "jack";
              } else {
                  this.name = "karen";
              }
              
          }
      },
      watch:{
          // 属性必须和数据源名字相同
          name(){
              console.log("名字改变了");
          }
      }
  })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    上述代码执行，点击一次按钮，属性监听器监听的data中的name属性就会改变，然后就会调用watch中的对应的方法，控制台就会打印 “名字改变了”

    自定义属性

    有时，我们仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令

    注意：指令和函数里面定义的要一致

    <div id="app">
 	<h1 v-fontfamily>{{msg}}</h1>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello word!"
        },
        directives:{
            fontfamily:{
                inserted(el) {
                    // console.log(el);
                    el.style.color = "yellow";
                    el.style.fontSize = "80px"
                    el.style.fontFamily = "隶书"
                }
            }
        },
    })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    执行上述代码，在div中使用自己的的指令，文字就会变成黄色，100px大小，隶书的模样了

    生命周期函数

    什么是生命周期函数？

    vm对象的生命周期函数(钩子函数,生命钩子)相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数

    vue组件的其中8个生命周期函数

    这里主要讲讲vue组件中的8个生命周期函数，即当前vm实例在创建到销毁的过程中 会去调用的8个函数

    分别是 创建前后（beforeCreate，created）,挂载前后（beforeMount，mounted）,更新前后（beforeUpdate，updated）,销毁前后（beforeDestroy，destroyedv）

    beforeCreate created beforeMount mounted destory/x 这些钩子都只执行一次
    beforeUpdate updated 第一次构建不会调用,以后每次data被更新了就会调用
    beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()，销毁vm实例

    beforeCreate 可以做网络请求但不可以设置到数据源中，因为这时还没创建好this

    created 可以做网络请求也可以设置到数据源中，因为这时已经创建好this

    beforeMount 可以操作this，但是无法操作DOM

    mounted vm已经挂载到页面了

    beforeUpdate，updated 这两个不可以做网络请求 如果去更新数据源就会导致死循环
    前者是数据源已经更新了,页面重新渲染前(并不是数据更新前) 触发的钩子，后者是页面已经重新渲染了触发的钩子

    beforeDestroy vm对象销毁之前触发的钩子,this还在 可以做最后的操作

    destroyed 在webpack的环境下操作 是无法操作this的

    为什么要用生命周期函数?

    主要是以下几点

    1. 把整个运行期间的业务区分的很明显
    2. 能够更好的帮助我们把产品的业务逻辑实现了
    3. 更有利于我们维护产品 和 修改需求
    4. 能够让我们写出更高质量的产品的代码

    组件

    什么是组件？

    组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用

    注意：注册组件时 组件名不要用系统已经使用过的 组件template模板中 只能有一个根元素
    注册时用的驼峰命名 使用时也可以使用连字符

    组件的注册使用有三种方式

    1.在vue里面直接注册

    <script src='https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
<body>
	<div id='app'>
		<Box></Box>
		<Box></Box>
	</div>
	<script>
	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		components:{
			Box:{
				template:`
    
			              
    6666
    
				           
    hello
    
			               
    `    
			}	
		}
	})
</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    这就已经定义好了一个组件，有需要就直接使用就好

    2.在vue外面注册

    <script src='https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
<div id='app'>
	<Box></Box>
	<Box></Box>
</div>
<script>
	let a1 = {
		template: `
    
	              
    6666
    
		           
    hello
    
	               
    `    
	}
	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		components: {
			Box: a1
		}
	})
</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    3.单独定义然后引入

    新建一个文件价单独定义组件，然后在有需要的时候引入文件

    // 定义组件
let a1 = {
	template: `
    
	            
    6666
    
				
    hello
    
				
    `    
}
export default a1;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    // 引入
<script src='https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
<div id='app'>
	<Box></Box>
	<Box></Box>
</div>
<script type="module">
	import Box from "./componnets/Box.js"
	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		components: {
			Box
		}
	})
</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    vue里面能写的函数组件里都可以用

    // 引入
<script src='https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
<div id='app'>
	<Box></Box>
	<Box></Box>
</div>
<script type="module">
	import Box from "./componnets/Box.js"
	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		components: {
			Box,
			Box2:{
				template:`
    
				       
    666-box2
    
					   
    {{msg}}
    
				 
    `    ,
				data:function(){
					return {msg:"msg66666"}
				},
				methods:{
					fn(){console.log("Box2组件的方法")}
				}
			}
		}
	})
</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
  • 相关阅读:
    2022牛客暑期多校训练营2 个人题解
    基于uclinux 的CAN 总线嵌入式驱动编程
    人工智能、机器学习和深度学习
    C++动态内存管理
    Tekla添加零件ContourPlate
    辉芒微IO单片机FT60F210-URT
    如何看待AIGC技术？
    Linux 中监控磁盘分区使用情况的 10 个工具
    nested字段聚合
    REST风格
  • 原文地址：https://blog.csdn.net/chuxialia/article/details/126691617