VueJS教程：添加反应性到动态添加的属性的选项

2018-09-2916:38:21WEB前端开发Comments2,817 views字数 3045阅读模式

VueJS提供了添加反应性到动态添加的属性的选项。考虑到已经创建了Vue实例并需要添加watch属性。它可以做到如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

创建一个文件：reactive-interface.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJS Reactive接口</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

数据对象中有一个属性计数器(counter)被定义为1。当我们点击按钮时，计数器(counter)会增加。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

Vue实例已经被创建。为了增加监视(watch)，还需要这样做 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

需要使用$watch在vue实例之外添加监视。添加了一个警报(alert())，显示计数器属性的值更改。还增加了一个定时器功能，即setTimeout，它将计数器值设置为20。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

每当计数器发生变化时，watch方法中的警报就会被触发，如下图所示。
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

VueJS无法检测属性添加和删除。最好的方法是始终声明属性，这些属性在Vue实例中需要被预先反应。如果需要在运行时添加属性，可以使用Vue全局Vue.set和Vue.delete方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

1. Vue.set

此方法有助于在对象上设置属性。它用来绕过Vue无法检测属性添加的限制。
语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

Vue.set( target, key, value )

在这里，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

target：可以是一个对象或一个数组
key：可以是字符串或数字
value：可以是任何类型的值

下面来看一个例子。创建一个文件：vue-set.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

在上面的例子中，在开始时使用下面的一段代码创建了一个变量myproduct。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

var myproduct = {"id":1, name:"book", "price":"20.00"};

它被赋予Vue实例中的数据对象如下 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

考虑一下，在创建Vue实例之后，如果想添加一个属性到myproduct数组中。可以通过如下方法做到 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

vm.products.qty = "1";

下面来看看看控制台中的输出。如下所示 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

如上所见，在产品中添加数量。 get/set方法基本上增加了反应性，可用于id，name和price，不可用于qty。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

不能通过添加vue对象来实现反应。VueJS大多希望在开始时创建所有的属性。但是，如果稍后需要添加它，可以使用Vue.set。为此，需要使用vue全局设置它，即Vue.set。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

示例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

上面示例中使用Vue.set添加数组到数组，使用下面的一段代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

Vue.set(myproduct, 'qty', 1);

vue对象如下控制台输出。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

现在，可以看到使用Vue.set添加的数量的get/set。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

2. Vue.delete

该函数用于动态删除属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

示例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

Vue.delete( target, key )

在这里，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

target：可以是一个对象或一个数组
key：可以是字符串或数字
value：可以是任何类型的值

参考以下代码 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

在上面的例子中，使用了Vue.delete来从数组中删除价格。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

Vue.delete(myproduct, 'price');

以下是在控制台中输出 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

删除后，只能看到价格被删除的ID和名称。也可以注意到get/set方法被删除。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6015.html

VueJS教程：添加反应性到动态添加的属性的选项

1. Vue.set

2. Vue.delete

编写异步 JavaScript 的 10 个最佳实践

搞懂 Vue3 defineModel 双向绑定：告别繁琐代码！

Tailwind CSS响应式Web设计全面掌握指南

全栈开发使用Node js（Express）、MYSQL进行CRUD

TypeScript项目搭配Axios封装后端接口调用

jQuery 4.0 测试版，体积小性能好不再支持 IE 10

JavaScript实现轮播图方法，代码简单

Next.Js 与 Tailwind 项目开发笔记

使用Vite创建Vue3项目并开发第一个组件

asyncio 中并发运行的多个任务要如何精确控制

Comment