vue中的各种属性

data

new vue({

  data:{

    ‘a‘:1

  }

})   是一个实例,data直接是一个对象

vue.component(‘my‘,{

  template:‘‘,

  props:[‘title‘],

  data: function() {

    return {

      ‘a‘:1 }

  }

})  是组件注册,data 返回一个函数。组件是一个相对独立的个体,如果data直接是一个对象的话,一个组件被多次使用时,属性会相互影响。所以使用一个有返回值的函数来解决这个问题。

prop

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。但子组件传值不能直接传给父组件,要在子组件的method中利用$emit(‘父组件中on监听的方法‘,值)自定义一个事件,并在父组件中引入子组件时,设置v-on:方法=‘方法‘,并在method中设置方法:function(值){}函数接收值。

详细内容:https://www.cnblogs.com/sxgxiaoge/p/9453306.html

watch和computed

两者都是监听vue属性,但是computed属性中需要一个返回值,而且代码是同步执行,而watch则不需要,代码也可以是异步的。

computed: {
    fullName: {
        get: function(){
            return this.firstName +this.lastName
        },
        set: function (newValue) {
            var names = newValue.split(‘ ‘)
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
},
watch: {
    search: function(){
        setTimeout(function(){
            console.log(11);
        },200);
    }
}
计算属性中这两个方法是固定的(get是默认的,可以自己加set),在调用和设置对应的值的时候会调用对应的函数。

computed 和 methods  watch区别

描述

vue 中computed 和methods 在使用效果来看可以说是一样的,但是深入看还是不一样的。区别就在于: computed 依赖缓存, methods 却不是。怎么理解呢?当Dom每次需要渲染computed的值,这个值已经处于缓存之中,不需要再重复的经历一遍计算过程,只有当computed依赖的数据变量发生变化,这个计算属性会自动更新,不需要渲染触发。methods 的值被获取的时候就会每次都会重新经历一遍计算过程。

所以由此可以看出,computed和methods 的应用场景 和 计算过程的复杂程度有关, 如果计算过程复杂庞杂,而且计算属性会被经常调用(getter),那么最好使用缓存;如果,需要的值,计算简单,调用不频繁,实时性比较高(存在异步请求),会比较适合methods

computed有缓存,若相关数据未发生变化,则不调用; 
methods无缓存,需要事件才能调用它(如点击等); 
watch多用于数据交互频繁的内容。(例如定时axios从服务器获取数据)。

 

原文地址:https://www.cnblogs.com/icctuan/p/11752915.html

时间: 2024-10-30 08:18:03

vue中的各种属性的相关文章

1.3 Vue中的计算属性和侦听器

Vue中的计算属性和侦听器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue中的计算属性和侦听器</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对vue中的computed属性,watch监听,计算属性理解

自己的理解: computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化.这里的这个总金额使用computed属性来进行计算是最

怎样理解 Vue 中的计算属性 computed 和 methods ?

需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods. 1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vu

Vue中的计算属性和侦听属性

Vue的侦听属性可以使用 watch ,它可以监听多个变量,一旦它们发生了变化,就执行function函数,var代表的是这个发生变化了的参数. var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName

vue中computed计算属性与methods对象中的this指针

this 指针问题 methods与computed中的this指针 应该指向的是它们自己,可是为什么this指针却可以访问data对象中的成员呢? 因为new Vue对象实例化后data中的成员和computed中的成员为实现化对象属性了,而methods中定义的方法为实现化对象方法了.这时this指针指向的是这个实现化对象. let v = new Vue({ el: '.test', data: { title: "121213" }, methods: { msg() { al

Vue中的计算属性

一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护. 二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: &

vue中使用计算属性巧妙的实现多选框的“全选”

接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 根据上图可以发现,购物车中的每一件商品都有一个选择框,而这个选择框则是需要用一个布尔字段,通过v-model绑定进去,监听该条购物车记录的选中状态. 首先,沟通后端,为前端预留一个select属性 该属性默认设置为false,因为购物车在被渲染出来时,默认是应该没有勾选任何一件商品的 然后,绑定到

vue中watched属性

watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watch:{ 'currentCity':{ handler:function (val,oldval) { this.ctFontSize = val.length > 3 ? true: false; } } }, 当currentCity的值发生变化时就会运行上面的代码

schema中的虚拟属性方法

schema中的虚拟属性方法相当于vue中的计算属性,它是通过已定义的schema属性的计算\组合\拼接得到的新的值 var personSchema = new Schema({ name: { first: String, last: String } }); var Person = mongoose.model('Person', personSchema); // create a document var bad = new Person({ name: { first: 'Walt