精华内容
下载资源
问答
  • 主要介绍了Vue中的methods、watch、computed的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • methods 定义方法我们可以使用 methods 属性给 Vue 定义方法,methods 基本语法:var vm = new Vue({ methods:{ // 在此时定义方法,方法之间使用逗号分隔 方法名:function(){} }); 示例:例如在 methods ...

    在 methods 中定义方法

    我们可以使用 methods 属性给 Vue 定义方法,methods 的基本语法:

    var vm = new Vue({
        methods:{
            // 在此时定义方法,方法之间使用逗号分隔
            方法名:function(){}
    });
    

    示例:

    例如在 methods 中定义一个名为 show 的方法:

    methods:{
        show: function(){
            console.log("显示内容")
        }
    }
    

    在方法中访问属性

    methods 方法中访问 data 的数据,可以直接通过 this.属性名 的形式来访问。

    示例:

    例如我们在 show 方法中,访问 number 属性,可以直接通过 this.number 形式访问,其中 this 表示的就是Vue 实例对象:

    <script>
      new Vue({
        el: '#app',
        data(){
          return{
            number: 100
          }
        },
        methods:{
          show: function(){
            console.log(this.number);
          }
        }
      });
    </script>
    

    如果是在 Vue 构造函数外部,可以使用 vm.方法名 定义或调用方法,还可以通过 vm.$data.属性名 来访问 data 中的数据。

    一个小实例

    下面是一个用于修改用户名的简单实现,在 button 按钮上绑定了一个 change 方法:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue的方法_侠课岛(9xkd.com)</title>
    <script src="./src/vue.min.js"></script>
    </head>
    <body>
        <h1>点击按钮修改名字</h1>
        <div id="app">
            <p>{{message}}</p>
            <button @click="change">点我改名</button>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data() {
                    return{
                        message: "小飞侠"
                    }
                },
                methods:{
                    change(){
                        this.message = "水星仔"  // 改变data中属性的值
                    }
                }
            })
        </script>
    </body>
    </html>
    

    演示图如下所示:

    39defe06a54747cab1fc0da302aff968.png
    展开全文
  • Vue中的methods方法

    2020-11-25 11:03:29
    我们可以使用 methods 属性给 Vue 定义方法,methods 基本语法: var vm = new Vue({ methods:{ // 在此时定义方法,方法之间使用逗号分隔 方法名:function(){} }); 示例: 例如在 methods 定义一个名为 ...

    在 methods 中定义方法

    我们可以使用 methods 属性给 Vue 定义方法,methods 的基本语法:

    var vm = new Vue({
        methods:{
            // 在此时定义方法,方法之间使用逗号分隔
            方法名:function(){}
    });
    
    示例:

    例如在 methods 中定义一个名为 show 的方法:

    methods:{
    	show: function(){
    		console.log("显示内容")
    	}
    }
    

    在方法中访问属性

    methods 方法中访问 data 的数据,可以直接通过 this.属性名 的形式来访问。

    示例:

    例如我们在 show 方法中,访问 number 属性,可以直接通过 this.number 形式访问,其中 this 表示的就是Vue 实例对象:

    <script>
      new Vue({
        el: '#app',
        data(){
          return{
            number: 100
          }
        },
        methods:{
          show: function(){
            console.log(this.number);
          }
        }
      });
    </script>
    

    如果是在 Vue 构造函数外部,可以使用 vm.方法名 定义或调用方法,还可以通过 vm.$data.属性名 来访问 data 中的数据。

    一个小实例

    下面是一个用于修改用户名的简单实现,在 button 按钮上绑定了一个 change 方法:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue的方法_侠课岛(9xkd.com)</title>
    <script src="./src/vue.min.js"></script>
    </head>
    <body>
        <h1>点击按钮修改名字</h1>
        <div id="app">
            <p>{{message}}</p>
            <button @click="change">点我改名</button>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data() {
                    return{
                        message: "小飞侠"
                    }
                },
                methods:{
                    change(){
                        this.message = "水星仔"  // 改变data中属性的值
                    }
                }
            })
        </script>
    </body>
    </html>
    

    演示图如下所示:

    展开全文
  • Vue中的methods、watch、computed 看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods、watch、computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的...

    Vue中的methods、watch、computed

    看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods、watch、computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景,也很难用好它们,希望接下来的介绍为你答疑解惑。

    computed

    我们先来看计算属性:computed,光看名字也知道是用来干什么的,计算属性当然是用来计算的,但是是怎么计算的呢?计算属性有两个显著的特点:

    • 计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行
    • 计算属性是基于依赖进行缓存的,就是说在依赖没有更新的情况,调用计算属性并不会重新计算,可以减少开销

    我们来看一个相关的例子:

    &lt;div id="app"&gt; &lt;div&gt;{{ arr.join('') }}&lt;/div&gt; &lt;div&gt;{{ arr1 }}&lt;/div&gt; &lt;div&gt;{{ getDate }}&lt;/div&gt; &lt;div&gt;{{ getDate1 }}&lt;/div&gt; &lt;/div&gt;

    
    var app = new Vue({
      el: '#app',
      data: {
        date: '',
        arr: ['a', 'b', 'c']
      },
      computed: {
        getDate () {
          return Date.now()
        },
        getDate1 () {
          return this.date
        },
        arr1 () {
          return this.arr.join('')
        }
      },
      created () {
        setInterval(() =&gt; {
          this.date = Date.now()
        }, 1000)
      }
    })

    看上面的例子,我们在写vue的时候,经常会碰到要对data的值进行操作的情况,为了方便,总是会有人直接在模版中对data的值进行计算操作,就像我上面例子中写的在模版中将数组转化为字符串,这样写有问题吗?语法没有问题,但是在模版中使用太多的计算,维护会是个问题,换个人来看代码的时候会很痛苦,这种写法就好像在html中插入js的逻辑运算,可维护性极差。另外一个展示的就是computed的响应式依赖的问题,当我们调用getDate的时候返回的Date.now()返回的是一个非响应式的依赖因此getDate返回的值不会变。

    应用场景

    看了computed的特点之后,那么它的应用场景是什么呢?个人看法,但不限于以下场景:

    • 复杂的渲染数据计算,用computed计算属性可以减少一定计算开销,增加可维护性
    • 从Vuex Store中收集相关信息,对Vuex中的数据做计算的时候的要特别注意computed的缓存属性,在对Vuex中的对象值进行属性修改的时候,并不会触发computed的中值的变化,这时需要Object.assign({},obj)对依赖对象进行跟新返回一个新对象触发依赖跟新
    • 表单校验,这个应用场景应该是比较常见的,利用正则表达式对每个表单项的实时监控,判断表单是否可以提交

    methods

    methods大家应该都会用,是vue中的方法属性,所有的方法调用都会写到这里面,大家用的最多也是在累似@click这样事件调用中使用,但是很多人都忽视methods的另一个用法,就是在模版中使用methods,下面来看一个例子:

    &lt;div id="app"&gt; &lt;div v-for="(item, idx) in arr"&gt; {{ matching(item) }} &lt;/div&gt; &lt;/div&gt;

    
    var app = new Vue({
      el: '#app',
      data: {
        arr: ['a', 'b', 'c'],
        obj: {a: 'hello', b: 'world'}
      },
      methods: {
        matching (key) {
          if (this.obj[key]) {
            return this.obj[key]
          } else {
            return 'not found'
          }
        }
      }
    })

    1546356-20181214215550330-278326624.png

    上面的例子就是methods在模版中常常使用的一个场景,当模版中的某个循环的值需要进行一定逻辑运算时,这时候你就可以使用methods方法,将对应的值传入,然后计算出结果返回到模版显示,这个时候用computed是没法实现的,computed中你无法传参,methods和computed除了这个不一样之外,还有就是在methods中的计算是不会做缓存的,也就是你调用多少次就会计算多少次,相对computed的开销要大一些。

    watch

    侦听属性是专门用来观察和响应vue实例上的数据变动,能使用watch属性的场景基本上都可以使用computed属性,而且computed属性开销小,性能高,因此能使用computed就尽量使用computed属性,那么watch属性是不是就没用武之地了呢?当执行异步操作的时候你可能就必须用watch而不是computed了,下面看一个例子:

    &lt;div id="app"&gt; &lt;div&gt;{{ obj1.a }}&lt;/div&gt; &lt;/div&gt;

    
    var app = new Vue({
      el: '#app',
      data: {
        obj: {a: 'hello'},
        obj1: {a: 'hello'},
        test: 'aaa'
      },
      computed: {
        getObj () {
          setTimeout(() =&gt; {
            this.obj.a = this.test + 'word'
            return this.obj
          }, 1000)
        }
      },
      watch: {
        test () {
          setTimeout(() =&gt; {
            this.obj1.a = this.test + 'word'
          }, 1000)
        }
      },
      mounted () {
        this.test = 'hello'
      }
    })

    上述例子中,当在模版中调用getObj.a时,如果没有setTimeout这异步操作,直接返回一个值是可以直接在模版中显示的,但是由于加异步操作就会导致没有返回值同时调用对象的属性,就会报错,而调用obj1.a却不一样,模版会先显示hello,然后在触发了watch属性时,setTimeout触发,一秒钟之后模版会显示helloword,这就watch中可以使用异步函数,而computed不行的原因

    总结

    希望看了这篇文章能对你区分methods、computed、watch的用法能有所帮助。
    这篇文章如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞收藏

    原文地址:https://segmentfault.com/a/1190000017136576

    posted @ 2018-12-14 21:56 栖息地 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • methods 定义方法我们可以使用 methods 属性给 Vue 定义方法,methods 基本语法:var vm = new Vue({ methods:{ // 在此时定义方法,方法之间使用逗号分隔 方法名:function(){} }); 示例:例如在 methods ...

    在 methods 中定义方法

    我们可以使用 methods 属性给 Vue 定义方法,methods 的基本语法:

    var vm = new Vue({
        methods:{
            // 在此时定义方法,方法之间使用逗号分隔
            方法名:function(){}
    });
    

    示例:

    例如在 methods 中定义一个名为 show 的方法:

    methods:{
        show: function(){
            console.log("显示内容")
        }
    }
    

    在方法中访问属性

    methods 方法中访问 data 的数据,可以直接通过 this.属性名 的形式来访问。

    示例:

    例如我们在 show 方法中,访问 number 属性,可以直接通过 this.number 形式访问,其中 this 表示的就是Vue 实例对象:

    <script>
      new Vue({
        el: '#app',
        data(){
          return{
            number: 100
          }
        },
        methods:{
          show: function(){
            console.log(this.number);
          }
        }
      });
    </script>
    

    如果是在 Vue 构造函数外部,可以使用 vm.方法名 定义或调用方法,还可以通过 vm.$data.属性名 来访问 data 中的数据。

    一个小实例

    下面是一个用于修改用户名的简单实现,在 button 按钮上绑定了一个 change 方法:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue的方法_侠课岛(9xkd.com)</title>
    <script src="./src/vue.min.js"></script>
    </head>
    <body>
        <h1>点击按钮修改名字</h1>
        <div id="app">
            <p>{{message}}</p>
            <button @click="change">点我改名</button>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data() {
                    return{
                        message: "小飞侠"
                    }
                },
                methods:{
                    change(){
                        this.message = "水星仔"  // 改变data中属性的值
                    }
                }
            })
        </script>
    </body>
    </html>
    

    演示图如下所示:

    add4a8ad3b281857b8c58041dfdf8b94.png
    展开全文
  • js调用vue中的methods方法

    万次阅读 2018-09-06 14:30:54
    在.vue中有这么一个方法: 你想在js中调用,或者是用js中的一个方法copy它,使用如下操作: 在methods中新添一方法: 在mounted中调用: js中: 这样FixedTime.approves就等同于那个想导出的方法了,...
  • vue中的methods,watch和computer区别

    万次阅读 多人点赞 2019-07-17 18:29:25
    ... methods,watch和computed都是以函数为基础,但各自却都不同。 一、作用机制上 ...1.watch和computed都是以Vue的依赖追踪机制为基础,它们都试图处理这样一件事情:当某一个数据(称它为依...
  • vue的中的methods属性是函数的容器 methods:{ //可以放置多个函数,函数与函数之间使用逗号隔开 handle:function(){}, //常见的还有下面的这种写法 handle(){} } filter 过滤器 vue中常用过滤器对一些数据...
  • 根据你未实现功能,选择合适例子。外部访问Vue的 methods 如下:例如1:var vm = new Vue({ el: '#app', data: { medd: 2, index: 1 }, methods: { add: function() { return vm.medd + v
  • 先声明,本文站在巨人...1.箭头函数this是在定义函数时继承了其父级作用域this,不是在执行过程绑定。 2.vue默认开启了严格模式。 3.全局作用域下函数使用this,在严格模式下this指向undefined 以上...
  • 一、computed,watch和methods区别 ...methods :执行条件是手动调用执行,不处理数据逻辑关系,只提供可调用函数,会重新渲染页面 二、computed和watch区别 watch 擅长处理场景:一个数据影响多个数据 compute...
  • vue中的methods,conputed,watcher

    千次阅读 2019-10-03 00:35:10
    1,computed(计算属性)属性结果会被缓存, 除非依赖响应式属性变化才会重新计算, 主要当做属性来使用;(虽然是个方法,但是当做属性使用)(场景:引用一些经过操作数据) computed: { fullName: function () { ...
  • 1、computed属性: 经过处理返回数据值,只要源数据没有发生改变,computed函数里面对相应数据就不会反生改变,相当于缓存在本地;发生改变时候,computed对应数据函数才会发生改...
  •  在用vue实现文字随机飘动效果时候,引出了一些在vue中处理随机函数一些小技巧。  如果你是为了文字随机飘动效果而来,也请了解一下我探索历程。  如何实现一个随机飘动多行字呢?  第一步:有多行字...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,459
精华内容 1,783
关键字:

vue中的methods

vue 订阅