Vue学习笔记3.4 - 数据监听 computed, methods, watch

电玩女神 2022-03-28 10:50 178阅读 0赞

computed： 用来做计算返回结果

示例：

<!DOCTYPE html>
    <head>
    	<title>计算属性，方法，监听器</title>
    	<script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		{
       {FullName}}
    		{
       {age}}
    	</div>
    </body>
    <script type="text/javascript">
    	var vm = new Vue({
    		el: "#app",
    		data: {
    			FirstName: 'Dell',
    			LastName: 'Lee',
    			age: 28
    		},
    		computed: {
    			FullName: function() {
    				console.log("计算了一次");
    				return this.FirstName + ' ' + this.LastName;
    			}
    		}
    	})
    </script>
    </html>

这样不需要设置FullName就可以得出结果返回到页面上

计算属性有缓存机制,在相关计算元素没有改变的情况下 是不会触发计算属性重新计算的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

属性。通过方法来调用。 示例：

注意：插值表达式中的表达式加了“()”

<!DOCTYPE html>
    <head>
    	<title>计算属性，方法，监听器</title>
    	<script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		{
       {FullName()}}
    		{
       {age}}
    	</div>
    </body>
    <script type="text/javascript">
    	var vm = new Vue({
    		el: "#app",
    		data: {
    			FirstName: 'Dell',
    			LastName: 'Lee',
    			age: 28
    		},
    		// 方法
    		methods: {
    			FullName: function() {
    				console.log("计算了一次");
    				return this.FirstName + ' ' + this.LastName;
    			}
    		}
    
    	})
    </script>
    </html>

使用方法监听数据的话。不会有缓存机制 不管跟自己有关没关的数据 更改了 它都重新计算一次

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1][]

wacth监听：

用watch监听。效果跟计算属性一样。就是代码比较冗余

示例：

<!DOCTYPE html>
    <head>
    	<title>计算属性，方法，监听器</title>
    	<script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		{
       {FullName}}
    		{
       {age}}
    	</div>
    </body>
    <script type="text/javascript">
    	var vm = new Vue({
    		el: "#app",
    		data: {
    			FirstName: 'Dell',
    			LastName: 'Lee',
    			FullName: 'Dell Lee',
    			age: 28
    		},
    		// 监听
    		watch: {
    			FirstName: function() {
    				console.log("计算了一次");
    				this.FullName = this.FirstName + ' ' + this.LastName
    			},
    			LastName: function() {
    				console.log("计算了一次");
    				this.FullName = this.FirstName + ' ' + this.LastName
    			}
    		}
    
    	})
    </script>
    </html>

使用监听的时候一开始不会调用（因为是现成的数据，除非一开始渲染页面的时候就修改了被监听的数据 比如生命周期函数中的代码）

在所监听的数据发生改变的时候才会触发

![20190110135137714.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220328/a25306325d244f048dd621b51573fc9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1]: /images/20220328/ba7be9d3ab8b4fb19a69db8b6c196848.png
[20190110135137714.png]: /images/20220328/8e50a1c1fc6746509bea7f5de02eba4c.png