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

最新推荐文章于 2023-08-08 08:45:00 发布

初夏半微凉

最新推荐文章于 2023-08-08 08:45:00 发布

阅读量248

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/chuxialia/article/details/126691617

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

计算属性

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

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

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

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

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

计算属性的特点

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

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

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

如果是修改了data中监听的某个的属性值计算属性就会运行
如果是修改了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>

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

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

属性侦听器

我个人觉得属性侦听器和计算属性功能差不多，计算属性中使用到的数据源发生变化，就会调用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>

上述代码执行，点击一次按钮，属性监听器监听的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>

执行上述代码，在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的

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

主要是以下几点

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

组件

什么是组件？

组件是可复用的 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:`<div>
			              <h1>6666</h1>
				           <p>hello</p>
			               </div>`
			}	
		}
	})
</script>
</body>

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

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: `<div>
	              <h1>6666</h1>
		           <p>hello</p>
	               </div>`
	}
	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		components: {
			Box: a1
		}
	})
</script>
</body>

3.单独定义然后引入

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

// 定义组件
let a1 = {
	template: `<div>
	            <h1>6666</h1>
				<p>hello</p>
				</div>`
}
export default a1;

// 引入
<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>

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:`<div>
				       <h1>666-box2</h1>
					   <p @click="fn">{{msg}}</p>
				 </div>`,
				data:function(){
					return {msg:"msg66666"}
				},
				methods:{
					fn(){console.log("Box2组件的方法")}
				}
			}
		}
	})
</script>
</body>