Vue 的属性、方法和生命周期

最新推荐文章于 2024-03-22 19:19:54 发布

大前小白

最新推荐文章于 2024-03-22 19:19:54 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：属性方法生命周期

本文链接：https://blog.csdn.net/weixin_45195200/article/details/100916338

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨了Vue.js框架的基本属性、方法及生命周期，详细解释了计算属性与监听属性的作用，以及如何通过方法进行数据操作。同时，文章还介绍了Vue实例从创建到销毁的全过程，即生命周期，并展示了不同阶段的钩子函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue的属性、方法和生命周期</title>
    <script src="Vue.min.js"></script>
  </head>

  <body>
    <div id="main">
      <span>{{ message }}</span>
      <br/>
      <span>{{ number }}</span>
      <br/>
      <button v-on:click="add">add</button>
    </div>
  </body>
</html>

<script>
  const App = new Vue({
    //  选择器
    el: '#main',
    //  数据
    data: {
      // 在data里面不仅可以定义字符串，我们还可以定义number
      message: 'Welcome to Chivalrous Island!',
      number: 85,
    },
    // 如果我们从服务器得到的数据并不是我们需要的，可能是上面数据的结合，这时我们可以用到一个Vue提供的一个属性：计算属性
    // 计算属性：可以把data里面的数据计算一下，然后返回一个新的数据，它被叫做computed。
    computed: {
      // 可以定义函数，然后返回需要的数据，比如下面我们要得到上面number的平方，计算结果为：
      getSqure: function () {
          return this.number * this.number;
      }
    },
    // 定义函数
    methods: {
      add: function() {
        this.number++;
      }
    },
    // 监听属性（监听器），它可以监听一个函数或者是一个变量
    watch: {
      // 函数接收两个参数值，afterVal代表改变之后的值，beforeVal表示改变之前的值
      number: function(afterVal,beforeVal) {
        console.log('beforeVal',beforeVal);
        console.log('afterVal',afterVal);
      }
    }
  });

  // 打印出来的结果
  console.log(App.getSqure);
</script>

属性

从上面的案例可以知道，属性可以分为计算属性（computed）和监听属性（watch）。
计算属性有一个好处在于它有一个缓存机制，因此它不需要每次都重新计算。
监听属性（监听器），它可以监听一个函数或者是一个变量。
在这里插入图片描述

方法（methods）

methods常调用的函数。
上面的示例中，getSqure，add，number，像这些都是我们自定义的方法。

生命周期（钩子函数）

生命周期就是从它开始创建到销毁经历的过程。
这个生命周期也就是Vue的实例，从开始创建，到创建完成，到挂载，再到更新，然后再销毁的一系列过程，这个官方有一个说法也叫作钩子函数。

<script>
window.onload = () => {
	const App = new Vue({
		......
	
		// 生命周期第一步：创建前（vue实例还未创建）
    	 beforeCreate() {
        	 // %c 相当于给输出结果定义一个样式
			console.log('%cbeforeCreate','color:green', this.$el);
			console.log('%cbeforeCreate','color:green', this.message);
    	 },
    	// 创建完成
    	created() {
        	 console.log('%ccreated','color:red', this.$el);
         	console.log('%ccreated','color:red', this.message);
    	},   
		// 挂载之前
		beforeMount() {
			console.log('%cbeforeMount','color:blue', this.$el);
			console.log('%cbeforeMount','color:blue', this.message);
		},
		// 已经挂载但是methods里面的方法还没有执行，从创建到挂载全部完成
		mounted() {
			console.log('%cmounted','color:orange', this.$el);
			console.log('%cmounted','color:orange', this.message);
		},
		 // 创建完之后，数据更新前
		beforeUpdate() {
			console.log('%cbeforeUpdate','color:#f44586', this.$el);
			console.log('%cbeforeUpdate','color:#f44586', this.number);
		},
		// 数据全部更新完成
		updated() {
			console.log('%cupdated','color:olive', this.$el);
			console.log('%cupdated','color:olive', this.number);
		},
		// 销毁
		beforeDestroy() {
			console.log('%cbeforeDestroy','color:gray', this.$el);
			console.log('%cbeforeDestroy','color:gray', this.number);
		},
		destroyed() {
			console.log('%cdestroyed','color:yellow', this.$el);
			console.log('%cdestroyed','color:yellow', this.number);
		}
	});
// 打印出来的结果
	console.log(App.getSqure);
	window.App = App;
};

// 销毁vue实例
function destroy() {
	App.$destroy();
}
</script>

html：

<body>
	<div id="main">
      <span>{{ message }}</span>
      <br/>
      <span>{{ number }}</span>
      <br/>
      <button v-on:click="add">add</button>
       <br />
      <button Onclick="destroy()">destroy</button>
	</div>
</body>

在这里插入图片描述