VUE数据与方法

╰+攻爆jí腚メ 2022-03-27 13:12 89阅读 0赞

VUE实现前端页面数据与控件的双向绑定，VUE实例中必须定义数据，以及操作数据的方法。  
Vue实现使用new Vue函数创建，当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
    
    <script>
    //我们的数据对象
    var data = { a: 1 }
    
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
      data: data
    })
    
    // 获得这个实例上的属性
    // 返回源数据中对应的字段
    console.log('vm.a == data.a '+(vm.a == data.a));
    
    // 设置属性也会影响到原始数据
    vm.a = 2
    console.log('data.a='+data.a);
    
    // ……反之亦然
    data.a = 3
    console.log('vm.a='+vm.a);
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：

vm.b = ‘hi’  
那么对 b 的改动将不会触发任何视图的更新

使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
    	<div id="app">
    	  <p>{
       { foo }}</p>
    	  
    	  <button v-on:click="foo = 'baz'">Change it</button>
    	</div>
    <script>
    var obj = {
    		  foo: 'bar'
    		}
    
    Object.freeze(obj)
    
    new Vue({
      el: '#app',
      data: obj
    })
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]

## 计算属性 ##

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
      {
       { message.split('').reverse().join('') }}
    </div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
    	<div id="app">
    	  <p>{
       { reverseMsg }}</p>
    	</div>
    <script>
    var obj = {
    	foo: 'bar'
    }
    
    new Vue({
      el: '#app',
      data: obj,
      computed:{
    	  reverseMsg:function(){
    		  return this.foo.split('').reverse().join('')
    	  }
      }
    })
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]

## 计算属性与VUE 方法区别 ##

计算属性会缓存计算结果，VUE方法是每次都计算，两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
    	<div id="app">
    	  <p>{
       { reverseMsg }}</p>
    	  <p>{
       { reverseMth() }}</p>
    	</div>
    <script>
    var obj = {
    	foo: 'bar'
    }
    
    new Vue({
      el: '#app',
      data: obj,
      computed:{
    	  reverseMsg:function(){
    		  return this.foo.split('').reverse().join('')
    	  }
      },
      methods: {
        reverseMth: function () {
        	return this.foo.split('').reverse().join('')
        }
      }
    })
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]

对应非响应依赖，计算属性只计算第一次的数值并缓存，以后发生变化也不再更新

now: function () {
    		    return Date.now()
    	  }

## 计算属性的 setter ##

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

## 侦听器 ##

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    </head>
    <body>
    	<div id="app">
    	  <p>{
       { foo }}</p>
    	  <input v-model="foo"/>
    	</div>
    <script>
    var obj = {
    	foo: 'bar'
    }
    
    new Vue({
      el: '#app',
      data: obj,
      watch: {
    	  foo:function(newVal,oldVal)
    	  {
    		  console.log('newVal='+newVal+',oldVal='+oldVal);
    	  }
      }
    })
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70]: /images/20220327/4bbcd51c44d340869be5d1ff6b520cd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 1]: /images/20220327/c9035ca0dce649af8c75c085b417df21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 2]: /images/20220327/8df3b95f91d945cb9893dcf4402959dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 3]: /images/20220327/47208ec0c22d479e9270858c8222a224.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpeGlhbmdfY2hlbg_size_16_color_FFFFFF_t_70 4]: /images/20220327/7359c3ae43794753901d4921c1d84795.png