精华内容
下载资源
问答
  • Vue.js教程之计算属性

    2020-12-29 03:16:48
    当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。 通常情况下,使用计算属性会比使用过程...
  • 计算属性允许生成高效和优雅的属性,这些属性是依赖于其他属性的某些计算的结果。 使用$computed,您可以轻松地使用类似于 Angular 的依赖注入的模式来定义它们。 以下是一些优点: 属性计算在输入改变后只执行一...
  • 微信小程序使用计算属性computed封装购物车组件
  • 计算属性

    千次阅读 2019-10-21 19:48:37
    计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致!!! 计算属性计算出来的结果会被缓存起来,下次无需计算直接显示,而方法不是,每次调用都会重新执行。 <!DOCTYPE html> <...

    1、什么是计算属性
    计算属性:可以理解为能够在里面写一些计算逻辑的属性。
    作用:1)减少模板中的计算逻辑
    2)数据缓存。当我们的数据没有变化时,不在执行计算的过程
    3)依赖固定的数据类型(响应式数据),不能是普通的传入的一个全局数据
    2、计算属性和方法
    值不是直接渲染到页面,也是通过计算之后再渲染到页面,可以使用计算属性computed
    1)methods中的方法在模板中被调用,如果这个方法依赖data,data的值发生了变化,这个方法就会重新执行;计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致!
    2) 计算属性计算出来的结果会被缓存起来,下次无需计算直接显示,而方法不是,每次调用都会重新执行。
    3、修改计算属性的值
    直接修改计算属性的值报错,Computed property "num2" was assigned to but it has no setter.在computed中定义get和set方法,在修改计算属性中的值

    <template>
        <div class="compute">        
            <p>修改计算属性的值</p>
            <h4>num: <span v-text="num"></span></h4>
            <h4>计算属性num2: <span v-text="num2"></span> </h4>
            <button class="btn" @click="change">改变计算属性的值</button>
        </div>
    </template>
    <script>
    export default {
        name:'compute',
        data(){
            return{           
                num:100
            }
        },
        computed:{
            // num2不是函数
            num2:{
                // 当计算属性要修改时先触发set方法
                // 读取当前计算属性的值,get方法可以隐藏,默认进入的是get方法
                get:function(){
                    return this.num*2-10
                },
                set:function(val){
                    this.num = val;
                    console.log('val',val)
                }
            }
        },
        methods:{       
            change(){
                // 直接修改计算属性的值报错,Computed property "num2" was assigned to but it has no setter.
                this.num2=60;
            }
        }
    }
    </script>
    <style lang="less" scoped>
    .compute{
        .btn{
            width: 130px;
            height: 37px;
            background: #fff;
            border-style: none;
            border: 1px solid #333;
            border-radius: 4px;
    
            &:hover{
                background: #42c5e6;
                color: #fff;
            }
        }
    }
    </style>
    

    在这里插入图片描述
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>计算属性</title>
    	<!-- 导入vue -->
    	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<!-- <p>{{message}}</p>
    		//反转之后显示
    		<p>{{ message.split("").reverse().join("") }}</p>
    		<p>{{ reverseMsg() }} </p>
    		<p>{{ reverseMsg() }} </p>
    		<p>{{ reverseMessage }} </p>
    		<p>{{ reverseMessage }} </p> -->
    		
    		<!-- <ul>
    			<li v-for="item in users.filter(u=>u.gender=='male')">
    				{{item}}
    			</li>
    		</ul> -->
    		
    		<button @click="gender='male'">男生</button>
    		<button @click="gender='female'">女生</button>
    		<ul>
    			<li v-for="item in userFilter">
    				{{item}}
    			</li>
    		</ul>
    
    
    	</div>
    	<script>
    		new Vue({
    			el:"#app",
    			data:{
    				message:"hello world",
    				users:[
    					{id:1,name:"terry",gender:"male"},
    					{id:2,name:"larry",gender:"male"},
    					{id:3,name:"vicky",gender:"female"},
    					{id:4,name:"lucy",gender:"female"},
    					{id:5,name:"tom",gender:"male"},
    				],
    				//默认值,默认情况显示男生
    				gender:"male"
    			},
    			//computed是一个计算属性,调用里面的方法不用加过好,直接用reverseMessage
    			computed:{
    				reverseMessage(){
    					console.log("computed-reverseMessage"+Math.random())
    					return this.message.split("").reverse().join("")
    				},
    				//过滤
    				//u=>u.gender===this.gender  箭头函数
    				userFilter(){
    				//当this.users以及this.gender发生变化的时候,计算属性会重新执行计算出新的结果然后渲染到页面中。
    					return this.users.filter(u=>u.gender===this.gender)
    				}
    			},
    			created(){
    				setTimeout(()=>{
    					this.message += "hello world"
    				},2000)
    			},
    			methods:{
    				reverseMsg(){
    					console.log("methods-reverseMsg"+Math.random())
    					return this.message.split("").reverse().join("")
    				}
    			}
    		})
    	</script>
    </body>
    </html>
    
    展开全文
  • Vue 计算属性与监听属性

    千次阅读 多人点赞 2019-05-16 10:01:04
    这篇文章将介绍计算属性与监听属性去解决该问题。 计算属性 [什么是计算属性?] 首先,来看一个字符串反转的例子: <div id="app1"> {{ message.split('').reverse().join('') }} </div> <s...

    前面的话

    模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护。这篇文章将介绍计算属性与监听属性去解决该问题。

    计算属性

    [什么是计算属性?]

    首先,来看一个字符串反转的例子:

    
        <div id="app1">
             {{ message.split('').reverse().join('') }}
        </div>
        <script>
        	new Vue({
                el: "#app1",
                data: {
                    message: 'xiaoqi'
                }
            })
        </script>
    
    

    上面这个例子,在模板中表达式包括3个操作,相对比较复杂,也不容易看懂。

    所以在遇到复杂的逻辑时应该使用计算属性。

    将上例进行改写:

    <div id="app2">
        <p>原字符串:{{message}}</p>
        <p>计算后反转字符串: {{reverseMessage}}</p>
     </div>
    <script>
    new Vue({
            el: "#app2",
            data: {
                message: 'xiaoqi'
            },
            computed: {
                // 计算属性的getter
                reverseMessage: function() {
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>
    

    在这里插入图片描述
    上面的模板中声明了一个计算属性reverseMessage。
    提供的函数将用作属性reverseMessage的getter(用于读取)。
    reverseMassage依赖于massage,在massage发生变化时,reverseMassage也会更新。

    [ computed Vs methods]

    我们发现computed属性完全可以由methods属性所代替,效果时完全一样的。既然使用methods就可以实现,那么为什么还需要计算属性呢?原因就是computed是基于它的依赖缓存,只有相关依赖发生改变时,才会重新取值。而使用methods,在重新渲染的时候,函数总会重新调用执行。可以说使用computed性能会更好。

    [ 依赖缓存]

    举一个更好说明computed是基于依赖缓存的例子:

     <div id="app3">
            <p>原字符串:{{message}}</p>
            <p>计算反转字符串:{{reverseMessage1}}</p>
            <p>计算反转字符串:{{reverseMessage1}}</p>
            <p>计算反转字符串:{{reverseMessage2()}}</p>
            <p>计算反转字符串:{{reverseMessage2()}}</p>
    </div>
    <script>
      var num = 1;
        new Vue({
            el: "#app3",
            data: {
                message: 'xiaoqi'
            },
            computed: {
                reverseMessage1:function () {
                    num += 1;
                    return num +  this.message.split('').reverse().join('');
                }
            },
            methods: {
                reverseMessage2() {
                    num += 1;
                    return num + this.message.split('').reverse().join('');
                }
            }
            
        })
    </script>
    

    在这里插入图片描述
    这个例子中,num是一个独立的变量。在使用reverseMessage1这个计算属性时,num会变成2 。但是当再使用reverseMessage1属性时,num没有变化,依然是2。因为Vue实例的message数据没有发生变化 于是DOM渲染就直接用这个值,不会重复执行代码。而reverseMessage2这个方法只要用一个,就要执行一次,于是每次返回的结果都不一样。

    [computed setter]

    每一个计算属性都包含一个getter与一个setter,上面的实例中都是计算属性的默认用法,只是利用getter来读取。
    computed属性默认只有getter,不过在需要时可以自己提供一个setter函数,当手动修改计算属性的值时,就会触发setter函数,执行自定义的操作。
    例如:

    <div id="app4">
        <p>{{ site }}</p>
    </div>
    <script>
     var vm =  new Vue({
            el: "#app4",
            data: {
                name: '淘宝',
                url: "http://www.Taobao.com"
            },
            computed: {
                site: {
                    // getter
                    get: function() {
                        return this.name + ' '+this.url;
                    },
                    // setter
                    set: function(newValue) {
                        var names = newValue.split(' ');
                        this.name = names[0];
                        this.url = names[names.length -1];
                    }
                }
            }
        });
        // vm.site的值是newValue对应的实参
        vm.site = 'baidu http://www.baidu.com';
        document.write('name:' + vm.name );
        document.write('<br>');
        document.write('url:'+ vm.url );
        </script>
    
    

    在这里插入图片描述
    上面的代码,当我们执行vm.site=‘baidu http://www.baidu.com’时,数据name与url都会相对更新,视图也会更新。

    监听属性 watch

    通过watch来响应数据的变化。
    虽然大多数情况计算属性都可以满足需要,但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时,就需要自定义监听器。

    [实例1]:通过使用watch实现计数器:

     <div id="app5">
            <p style = "font-size: 25px;">计数器:{{ counter }}</p>
            <button @click = "counter++" style="font-size: 25px"> 点击我</button>
     </div>
     <script> 
        var vm1 = new Vue({
            el: "#app5",
            data: {
                counter: 1
            }
        });
        vm1.$watch('counter',function(nval,oval) {
            alert('计数器值的变化:' + oval + '变为' + nval + "!");
        })
     </script>
    

    注意:$watch是一个实例方法,后面是一个回调函数,这个回调函数将在counter值改变之后调用
    在这里插入图片描述
    在这里插入图片描述

    [实例2]:千米与米之间的换算

      <div id="app6">
            千米:<input type="text" v-model='kilometers'>
            米:<input type="text" v-model='meters'>
            <p id="info"></p>
        </div>
         <script> 
         var vm2  = new Vue({
            el: '#app6',
            data: {
                kilometers:0,
                meters:0
            },
            watch: {
                // 监听kilometers数据
                kilometers: function(val) {
                    console.log(val);
                    this.kilometers = val;
                    this.meters = this.kilometers * 1000;
                },
                // 监听meters数据
                meters: function(val) {
                    this.meters = val;
                    this.kilometers = val /1000;
                }
            }
        });
        // $watch是一个实例方法
        vm2.$watch("kilometers",function(newValue,oldValue) {
            // 这个回调函数在vm2.kilometers改变后调用
            document.getElementById('info').innerHTML =  "修改前值为: " + oldValue + ",修改后值为: " + newValue;
        })
     </script>
    

    在这里插入图片描述

    [computed与watch的区别]

    简单来说:
    1:computed是同步的,watch可以实现异步
    2:computed中的函数都是带返回值的,wacth里面的函数可以不写返回值。

    我们可以在watch属性的方法里执行异步操作,使用定时器来限制操作的频率吧,添加中间状态等等,这些操作都是无法用计算属性实现的。

     <div id="app">
          {{count}}
          <button @click="count++">点击加一</button>
     </div>
    <script>
    new Vue({
    	el: "#app",
    	data: {
    	count: 1
    	},
    	watch: {
           count: function(val) {
     			var  that = this;
    			window.setTimeout(function() {
    				that.count = 0;
    		},2000)
    }
    }
    })
    </script>
    

    在这里插入图片描述
    当watch监听到count值发生变化时,2秒之后归零
    在这里插入图片描述

    计算属性、指令实现简单实战

    实例:通过计算属性、指令等实现简单的购物车

     <style>
            table {
                 border: 1px solid black;
                 width: 100%;
                }
          
            th {
                height: 50px;
                }
            th, td {
                border-bottom: 1px solid #ddd;
                }
        </style>
        <div id="app7">
            <table>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>购买价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="iphone in IP_Json">
                    <td>{{iphone.id}}</td>
                    <td>{{iphone.name}}</td>
                    <td>{{iphone.price}}</td>
                    <td>
                        <!-- v-bind指令的参数disabled,当iPhone.count === 0时,不可再点击 -->
                        <button :disabled="iphone.count === 0" @click="iphone.count-=1">-</button>
                        {{iphone.count}}
                        <button @click="iphone.count+=1">+</button>
                    </td>
                    <td>
                        <button @click="iphone.count=0">移除</button>
                    </td>
                </tr>
            </table>
            总价:${{totalPrice}}
        </div>
        <script>
         var shop = new Vue({
            el:"#app7",
            data: {
                IP_Json: [{
                    id: 1,
                    name: "huawei",
                    price: 5099,
                    count: 1
                  },
                  {
                      id:2,
                      name: "xiaomi",
                      price: 4899,
                      count: 1
                  },
                  {
                      id:3,
                      name: "iphone x",
                      price: 8900,
                      count: 1
                  },
                ]
            },
            computed : {
                totalPrice: function() {
                    var totalP = 0;
                    var len = this.IP_Json.length;
                    for( var i= 0; i<len;i++){
                        totalP += this.IP_Json[i].price * this.IP_Json[i].count;
                    }
                    return totalP;
                }
            }
        })
    </script>
    
    展开全文
  • vuex与计算属性详解

    千次阅读 2019-04-13 14:07:02
    由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态: // 创建一个 Counter 组件 const Counter = { template: `<div>{{ count }}</div>`, computed: { ...

    vue

    vuex

    Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

    Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

    state

    Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。

    由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:

    
    	// 创建一个 Counter 组件
    	const Counter = {
    	  template: `<div>{{ count }}</div>`,
    	  computed: {
    	    count () {
    	      return store.state.count
    	    }
    	  }
    	}
    
    
    

    然而,这种模式导致组件依赖全局状态单例。在模块化的构建系统中,在每个需要使用 state 的组件中需要频繁地导入,并且在测试组件时需要模拟状态。

    Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)):

    
    	import store from './store'
    
    	const app = new Vue({
    	  el: '#app',
    	  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
    	  store,
    	  components: { Counter },
    	  template: `
    	    <div class="app">
    	      <counter></counter>
    	    </div>
    	  `
    	})
    
    
    

    通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现:

    
    	const Counter = {
    	  template: `<div>{{ count }}</div>`,
    	  computed: {
    	    count () {
    	      return this.$store.state.count
    	    }
    	  }
    	}
    
    
    getter

    有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数:

    
    	computed: {
    	  doneTodosCount () {
    	    return this.$store.state.todos.filter(todo => todo.done).length
    	  }
    	}
    
    

    如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

    Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    Getter 接受 state 作为其第一个参数:

    
    	const store = new Vuex.Store({
    	  state: {
    	    todos: [
    	      { id: 1, text: '...', done: true },
    	      { id: 2, text: '...', done: false }
    	    ]
    	  },
    	  getters: {
    	    doneTodos: state => {
    	      return state.todos.filter(todo => todo.done)
    	    }
    	  }
    	})
    
    

    通过属性访问
    Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:

    
    	store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
    
    

    Getter 也可以接受其他 getter 作为第二个参数:

    	
    	getters: {
    	  // ...
    	  doneTodosCount: (state, getters) => {
    	    return getters.doneTodos.length
    	  }
    	}
    	store.getters.doneTodosCount // -> 1
    
    

    我们可以很容易地在任何组件中使用它:

    
    	computed: {
    	  doneTodosCount () {
    	    return this.$store.getters.doneTodosCount
    	  }
    	}
    
    

    注意,getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

    通过方法访问

    你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

    
    	getters: {
    	  // ...
    	  getTodoById: (state) => (id) => {
    	    return state.todos.find(todo => todo.id === id)
    	  }
    	}
    
    

    store.getters.getTodoById(2) // -> { id: 2, text: ‘…’, done: false }

    注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

    mutation

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

    
    	const store = new Vuex.Store({
    	  state: {
    	    count: 1
    	  },
    	  mutations: {
    	    increment (state) {
    	      // 变更状态
    	      state.count++
    	    }
    	  }
    	})
    
    

    你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:

    
    	store.commit('increment')
    
    

    提交载荷(Payload)

    你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload):

    
    	mutations: {
    	  increment (state, n) {
    	    state.count += n
    	  }
    	}
    	store.commit('increment', 10)
    
    

    在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读:

    
    	mutations: {
    	  increment (state, payload) {
    	    state.count += payload.amount
    	  }
    	}
    	store.commit('increment', {
    	  amount: 10
    	})
    
    

    对象风格的提交方式

    提交 mutation 的另一种方式是直接使用包含 type 属性的对象:

    
    	store.commit({
    	  type: 'increment',
    	  amount: 10
    	})
    
    

    当使用对象风格的提交方式,整个对象都作为载荷传给 mutation 函数,因此 handler 保持不变:

    
    	mutations: {
    	  increment (state, payload) {
    	    state.count += payload.amount
    	  }
    	}
    
    

    Mutation 需遵守 Vue 的响应规则

    既然 Vuex 的 store 中的状态是响应式的,那么当我们变更状态时,监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项:

    最好提前在你的 store 中初始化好所有所需属性。

    当需要在对象上添加新属性时,你应该

    使用 Vue.set(obj, ‘newProp’, 123), 或者

    以新对象替换老对象。例如,利用 stage-3 的对象展开运算符我们可以这样写:

    
    	state.obj = { ...state.obj, newProp: 123 }
    
    

    Mutation 必须是同步函数
    一条重要的原则就是要记住 mutation 必须是同步函数。为什么?请参考下面的例子:

    
    	mutations: {
    	  someMutation (state) {
    	    api.callAsyncMethod(() => {
    	      state.count++
    	    })
    	  }
    	}
    
    

    现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的

    在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,mutation 都是同步事务:

    
    	store.commit('increment')
    	// 任何由 "increment" 导致的状态变更都应该在此刻完成。
    
    

    在组件中提交 Mutation
    你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

    
    	import { mapMutations } from 'vuex'
    	
    	export default {
    	  methods: {
    	    ...mapMutations([
    	      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    	
    	      // `mapMutations` 也支持载荷:
    	      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    	    ]),
    	    ...mapMutations({
    	      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    	    })
    	  }
    	}
    
    
    Action

    Action 类似于 mutation,不同在于:

    • Action 提交的是 mutation,而不是直接变更状态。
    • Action 可以包含任意异步操作
    
    	const store = new Vuex.Store({
    	  state: {
    	    count: 0
    	  },
    	  mutations: {
    	    increment (state) {
    	      state.count++
    	    }
    	  },
    	  actions: {
    	    increment (context) {
    	      context.commit('increment')
    	    }
    	  }
    	})
    
    

    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时,你就知道 context 对象为什么不是 store 实例本身了。

    分发 Action : Action 通过 store.dispatch 方法触发:

    
    	actions: {
    	  increment ({ commit }) {
    	    commit('increment')
    	  }
    	}
    	
    	store.dispatch('increment')
    
    

    Actions 支持同样的载荷方式和对象方式进行分发:

    
    	// 以载荷形式分发
    	store.dispatch('incrementAsync', {
    	  amount: 10
    	})
    	
    	// 以对象形式分发
    	store.dispatch({
    	  type: 'incrementAsync',
    	  amount: 10
    	})
    
    
    module

    使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

    为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

    	
    	const moduleA = {
    	  state: { ... },
    	  mutations: { ... },
    	  actions: { ... },
    	  getters: { ... }
    	}
    	
    	const moduleB = {
    	  state: { ... },
    	  mutations: { ... },
    	  actions: { ... }
    	}
    	
    	const store = new Vuex.Store({
    	  modules: {
    	    a: moduleA,
    	    b: moduleB
    	  }
    	})
    	
    	store.state.a // -> moduleA 的状态
    	store.state.b // -> moduleB 的状态
    
    

    模块的局部状态

    对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象。

    
    	const moduleA = {
    	  state: { count: 0 },
    	  mutations: {
    	    increment (state) {
    	      // 这里的 `state` 对象是模块的局部状态
    	      state.count++
    	    }
    	  },
    	
    	  getters: {
    	    doubleCount (state) {
    	      return state.count * 2
    	    }
    	  }
    	}
    
    

    计算属性 computed

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。当在模板中使用复杂的逻辑时,应当使用计算属性;

    
    	<div id="example">
    	  <p>Original message: "{{ message }}"</p>
    	  <p>Computed reversed message: "{{ reversedMessage }}"</p>
    	</div>
    
    	var vm = new Vue({
    	  el: '#example',
    	  data: {
    	    message: 'Hello'
    	  },
    	  computed: {
    	    // 计算属性的 getter
    	    reversedMessage: function () {
    	      // `this` 指向 vm 实例
    	      return this.message.split('').reverse().join('')
    	    }
    	  }
    	})
    
    
    
    计算属性缓存 vs 方法

    你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。

    
    		<p>Reversed message: "{{ reversedMessage() }}"</p>
    		// 在组件中
    		methods: {
    		  reversedMessage: function () {
    		    return this.message.split('').reverse().join('')
    		  }
    		}
    
    
    

    然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数

    注意:如果你不希望有缓存,请用方法来替代。

    计算属性 vs 侦听属性

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。

    当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch 。 然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

    
    		<div id="demo">{{ fullName }}</div>
    
    		var vm = new Vue({
    		  el: '#demo',
    		  data: {
    		    firstName: 'Foo',
    		    lastName: 'Bar',
    		    fullName: 'Foo Bar'
    		  },
    		  watch: {
    		    firstName: function (val) {
    		      this.fullName = val + ' ' + this.lastName
    		    },
    		    lastName: function (val) {
    		      this.fullName = this.firstName + ' ' + val
    		    }
    		  }
    		})
    
    		上面代码是命令式且重复的。将它与计算属性的版本进行比较:
    		
    		var vm = new Vue({
    		  el: '#demo',
    		  data: {
    		    firstName: 'Foo',
    		    lastName: 'Bar'
    		  },
    		  computed: {
    		    fullName: function () {
    		      return this.firstName + ' ' + this.lastName
    		    }
    		  }
    		})
    
    
    
    计算属性的 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 也会相应地被更新。

    展开全文
  • 计算属性computed里面的getter和setter

    千次阅读 多人点赞 2019-06-28 16:09:36
    参考一: 在 Vue 中,computed 的属性可以被视为是 data 一样,可以读取和设值,因此在 computed 中可以分成 getter...vue.js计算属性默认只有 getter,因为是默认值所以我们也常常省略不写,如下代码: <...

    参考一:

    在 Vue 中,computed 的属性可以被视为是 data 一样,可以读取和设值,因此在 computed 中可以分成 getter(读取) 和 setter(设值),一般情况下是没有 setter 的,computed 预设只有 getter ,也就是只能读取,不能改变设值。

    vue.js计算属性默认只有 getter,因为是默认值所以我们也常常省略不写,如下代码:

    <div id="demo">{{ fullName }}</div>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
    

    其实computed里的代码完整的写法应该是:

     computed: {
        fullName: {
          get(){
             return this.firstName + ' ' + this.lastName
          }
        }
      }
    

    计算属性getter的触发时间

    <template>
        <div id="demo">
             <p> {{ fullName }} </p>
             <input type="text" v-model="firstName">
             <input type="text" v-model="lastName">
        </div>
    </template>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'zhang',
        lastName: 'san'
      },
      computed: {
        fullName: function () {
          console.log('computed getter...')
          return this.firstName + ' ' + this.lastName
        }
      },
      updated () {
         console.log('updated')
      }
    })
    

    如果我们改变上边代码里的2个输入框的值firstName或者lastName,都会触发computed以及updated (),也就是说会执行: console.log('computed getter...')和console.log('updated') (用来验证是不是执行了,没有其他意思)

    需要注意的是,不是说我们更改了getter里使用的变量,就会触发computed的更新,前提是computed里的值必须要在模板里使用才行。怎么理解呢?

    如下代码,我们把template里的fullName 注释掉:

    <template>
        <div id="demo">
             <!-- <p> {{ fullName }} </p> -->
             <input type="text" v-model="firstName">
             <input type="text" v-model="lastName">
        </div>
    </template>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'zhang',
        lastName: 'san'
      },
      computed: {
        fullName: function () {
          console.log('computed getter...')
          return this.firstName + ' ' + this.lastName
        }
      },
      updated () {
         console.log('updated')
      }
    })
    

    就算我们更改了firstName以及lastName都不会触发computed 中的 getter 中的console.log('computed getter...'),而只会触发console.log('updated')

    计算属性settter

    <template>
        <div id="demo">
             <p> {{ fullName }} </p>
             <input type="text" v-model="fullName">
             <input type="text" v-model="firstName">
             <input type="text" v-model="lastName">
        </div>
    </template>
    
    var vm = new Vue({
      el: '#demo',
      data: {
        firstName: 'zhang',
        lastName: 'san'
      },
      computed: {
        fullName: {
          //getter 方法
            get(){
                console.log('computed getter...')
                return this.firstName + ' ' + this.lastName
            },
       //setter 方法
            set(newValue){
                console.log('computed setter...')
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
                return this.firstName + ' ' + this.lastName
            }
          
        }
      },
      updated () {
         console.log('updated')
      }
    })
    

    在template 中,我们可以看到,input 是直接绑 v-model="fullName",如果我们这里直接修改了fullName的值,那么就会触发setter,同时也会触发getter以及updated函数。其执行顺序是setter -> getter -> updated,如下:

    console.log('computed setter...')
    console.log('computed getter...')
    console.log('updated')
    

    这里需要注意的是,并不是触发了setter也就会触发getter,他们两个是相互独立的。我们这里修改了fullName会触发getter是因为setter函数里有改变firstName 和 lastName 值的代码。也就是说我们如果注释掉上边的setter中修改firstName 和lastName的代码后就不会执行getter,如下:

    set(newValue){
                console.log('computed setter...')
                // var names = newValue.split(' ')
               //  this.firstName = names[0]
              //  this.lastName = names[names.length - 1]
              return this.firstName + ' ' + this.lastName
            }
    

    会执行,且顺序如下

    console.log('computed setter...')
    console.log('updated')

    参考二:

    computed 计算属性

    定义:当其依赖的属性的值发生变化的时,计算属性会重新计算。反之则使用缓存中的属性值。

    一个完整的计算属性如下:

    computed: {
     example: {
       get () {
         return 'example'
       },
       set (newValue) {
         console.log(newValue)
       }
     }
    复制代码

    基础用法

    1.计算属性的getter函数

    当其依赖的属性的值发生变化的时,这个计算属性的值也会自动更新。多用于"data,computed"的属性。

    <template>
      <div>
        <h4>测试</h4>
        <div>
          <input type="text" v-model="message" />
          <div>{{changeMessage}}</div>
        </div>
      </div>
    </template>
    
    <script>
       export default {
        data () {
           return {
             message: 'hello'
           }
         },
        computed: {
           changeMessage: {
            // 计算属性:依赖message变化而变化  依赖没变化就不会重新渲染;
            get () {
               return this.message + 'world'
            },
            set () {
            }
          }
         }
      }
    </script>
    复制代码

    2.计算属性的setter函数

    当赋值给计算属性的时候,将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。

    <template>
      <div>
        <h4>测试</h4>
        <div>
          {{didi}}
          {{family}}
        </div>
        <div>
          {{didiFamily}}
        </div>
      </div>
    
    </template>
    
    <script>
       export default {
        data () {
           return {
            didi: 'didi',
            family: 'family'
           }
         },
        computed: {
          didiFamily:{
            //getter
            get:function(){
              return this.didi + ' ' + this.family
            },
            //setter
            set:function(newValue){
              // 这里由于该计算属性被赋值,将被调用
              console.log(newValue)
              this.didi = 123
              this.family = 456
            }
          }
        },
        mounted () {
          // 赋值,调用setter函数
          this.didiFamily = 'John Doe'
        }
      }
    </script>
    复制代码

    3.计算属性的缓存

    Vue实例中被观察的数据属性发生了改变时才会重新执行getter,但是我们有时候计算属性依赖实时的非观察数据属性,比如下面例子中的Data.now

    <template>
      <div>
        <h4>测试</h4>
        <div>
          <input type="text" v-model="message" />
          <div>{{now}}</div>
        </div>
      </div>
    
    </template>
    
    <script>
       export default {
        data () {
           return {
             message: 'hello'
           }
         },
        computed: {
          now:{
            cache: false,
            get:function(){
              return Date.now() + this.message
            }
          }
        },
        mounted () {
          setInterval(() => {
            // 当缓存开关为false的时候,定时器每次打印的时间都是不一样的
            console.log(this.now)
          }, 500)
        }
      }
    </script>
    复制代码

    1.计算属性getter不执行的场景

    当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性的时候,那么对应的计算属性的getter函数方法不会执行

    代码实例如下

    <template>
      <div>
        <h4>测试</h4>
        <div>
          <button @click="toggleShow">Toggle Show Total Price</button>
          <p v-if="showTotal">Total Price = {{totalPrice}}</p>
        </div>
      </div>
    
    </template>
    
    <script>
       export default {
        data () {
           return {
            showTotal: true,
            basePrice: 100
           }
         },
        computed: {
          totalPrice () {
            return this.basePrice + 1
          }
        },
        methods: {
          toggleShow () {
            this.showTotal = !this.showTotal
          }
        }
      }
    </script>
    复制代码

    2.在v-for中使用计算属性,起到类似"过滤器的作用"

    <template>
      <div>
        <h4>测试</h4>
        <div>
          <ul>
          	<li v-for="n in evenNumbers">{{n}}</li>
          </ul>
        </div>
      </div>
    
    </template>
    
    <script>
       export default {
        data () {
           return {
            numbers: [ 1, 2, 3, 4, 5 ]
           }
         },
        computed: {
          evenNumbers () {
            return this.numbers.filter(function (number) {
              return number % 2 === 0
            })
          }
        }
      }
    </script>
    
    复制代码

    3.watch与computed的set函数的比较

    vuex 接收 的computed ,用set监测不到变化,必须要用watch才可以生效;(原理:实质没有改变computd的值,只是改变了get的return值 => 组件外的访问)

    v-model 改变的computed,用watch监测不到变化,必须要用computed对象中的set函数方法才能监测得到(原理:相当于每次改变了computed自身的值 => 组件内的访问)

    参考三:

    一、getter 和 setter

    首先要明确一点,每一个计算属性都包含一个 getter 函数和 setter 函数。

    举个栗子:来实现一个 "显示姓名" 的 小demo 。

    <div id="app">
        {{ fullName }}                      // 3、渲染 fullName
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {                               // 1、在data中定义 firstName 和 lastName
        firstName: 'Barry',
        lastName: 'Dong'
      },
      computed: {                          // 2、在计算属性中定义 fullName
        fullName: function () {
          return this.firstName + this.lastName
        }
      }
    })
    

    现在你可以在页面中看到 "BarryDong" 。

    等等,getter 和 setter 呢?你不是说每一个计算属性都包含一个 getter 和 setter 吗?上面这个 demo 怎么没有呢?

    这是因为,计算属性会默认使用 getter 函数。也就是说,即使你没有明确写出 getter 函数,计算属性也会默认使用它。

    上面的 demo 中的计算属性,可以改写成这样:

    computed: {
        fullName: {
          get: function () {             // 这里就明确写出了 getter 函数
            return this.firstName + this.lastName
          }
        }
    }
    

    运行结果与上次结果一致。

    那么 setter 函数呢?

    setter 函数与 getter 函数类似,也是写在计算属性中。而不同之处在于,getter 函数是默认用法,setter 函数不是默认用法。如果你要使用 setter 函数,那么你必须要手动写出 setter 函数。

    比如,上面的 demo ,需求变了:我要能显示名字的同时,还能改变名字。(这里我们要求,姓与名之间要用中文逗号分隔,不然不好识别哪个是姓,哪个是名)

    <div id="app">
        {{ fullName }} <br>
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        firstName: 'Barry',
        lastName: 'Dong'
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + this.lastName
          },
          set: function (newName) {        // 我们加上了 setter 函数,可以传入新的名字
            var name = newName.split(',')  // 把传入的名字根据逗号,拆分成数组
            this.firstName = name[0]    // 数组的第一个元素为 firstName
            this.lastName = name[1]     // 数组的第二个元素为 lastName
          }
        }
      }
    })
    

    现在我们打开控制台,在控制台中改变名字:

    访问 Vue 实例的属性的属性,直接使用点运算符即可

    那么现在可以看到,页面中渲染出了 "曾小贤" 。

    总结:

    • 每一个计算属性都包含一个 getter 函数和 setter 函数;
    • 计算属性会默认使用 getter 函数;
    • 你也可以提供 setter 函数,当修改计算属性的值时,就会触发 setter 函数,执行一些自定义的操作。

    二、methods 与 computed

    首先要知道,methods 里的方法,与 computed 里的方法,可以起到同样的作用。

    举个栗子:做一个 "现在距1970年的时间戳" demo 。

    <div id="app">
        方法拿到的时间戳:{{ now() }} <br>
        计算属性拿到的时间戳:{{ thisTime }}
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {               // 你看下面 computed 中的方法,是不是类似的?
        now: function () {
          return Date.now()
        }
      },
      computed: {
        thisTime: function () {
          return Date.now()
        }
      }
    })
    

    可以看到,两种方法都拿到了时间戳。

    那么细心的同学会发现,上面代码中:

    <div id="app">
        方法拿到的时间戳:{{ now() }} <br>    // now 后面有括号
        计算属性拿到的时间戳:{{ thisTime }}  // thisTime 后面没有括号
    </div>
    

    这是为啥呢?

    因为,now 是写在 methods 中的,所以要调用。而 thisTime 是写在 计算属性 中的,既然是属性,那自然就不用加括号了。

    请牢记这一点。


    三、计算属性的缓存

    这里要结合 methods 来对比学习。

    methods:只要页面重新渲染,methods 中的方法就会重新执行;不渲染,就不执行。

    如:

    <div id="app">
        {{ text }}
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        text: '星星点灯',          // text 在页面中渲染
        message: '照亮我的前程'    // message 未在页面中渲染
      },
      computed: {
        ...
      },
      methods: {
        ...
      }
    })

    如果通过 app.text 改变了 text 的值,那么页面就会重新渲染出 text 的值,methods 中的方法也会重新执行。而如果改变的是 message ,因为 message 未在页面中渲染,那么页面就不会重新渲染 message 的值,methods 中的方法不会重新执行。

    computed:不管页面是否渲染,只要计算属性依赖的数据未发生改变,那么计算属性就不会发生变化,因为计算属性是基于它的缓存的。只有当计算属性依赖的数据发生变化时,计算属性才会重新取值。

    如:

    <div id="app">
        {{ abc }}
    </div>
    
    var app = new Vue({
      el: '#app',
      data: {
        text: '星星点灯',
        message: '照亮我的前程',
        dongdong: '哼哼哈嘿'
      },
      computed: {
        abc: function () {
          return this.text + this.message    // 计算属性依赖了 Vue 实例中的 text 和 message
        }
      },
      methods: {
        
      }
    })
    

    如果我将 Vue 实例中的 text 属性更改:

    那么计算属性就会重新取值,重新渲染:

    页面重新渲染

    而如果我更改实例中的 dongdong 属性,因为计算属性没有依赖它,所以计算属性不会变:

    页面仍然显示:

     

    那我们要在什么时候使用计算属性呢?

    那就取决于你是否需要使用缓存了!如果你要遍历一个很大的数组,或者要进行大量的运算,那么你就可以使用计算属性。

     

    补充一点:

    计算属性不仅可以依赖当前 Vue 实例的数据,还可以依赖其他 Vue 实例的数据。

    <div id="app">
        {{ text }} <br>
        {{ reverseText }}
    </div>
    
    var app2 = new Vue({
      el: '#app2',
      data: {
        text: '你自己却不知道'
      }
    })
    
    var app = new Vue({
      el: '#app',
      data: {
        text: '我想说其实你很好'
      },
      computed: {
        reverseText: function() {
          return this.text.split('').reverse().join('') + ',' + app2.text    // 依赖 app2 中的 text
        }
      }
    })
    

    如果 app2 中的 text 改变,那么计算属性也会随之改变。

    展开全文
  • Vue 的组件对象支持了计算属性 `computed` 和侦听属性 `watch` 2 个选项,很多同学不了解什么时候该用 `computed` 什么时候该用 `watch`。先不回答这个问题,我们接下来从源码实现的角度来分析它们两者有什么区别。
  • Vue计算属性

    万次阅读 2019-01-04 15:12:00
    一、计算属性 计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新。 代码如下: <div id="example"> <input type="text" v-model="didi"> &...
  • React中的“计算属性

    千次阅读 2019-12-10 16:07:42
    React中的“计算属性” 相信许多学习过vue的小伙伴对计算属性都不陌生吧。计算属性能帮我们数据进行一些计算操作,计算属性是依赖于data里面的数据的,在vue中只要计算属性依赖的data值发生改变,则计算属性就会调用...
  • 在学习Vue的过程中,我们经常会使用计算属性来作为输出在页面中的数据内容,发现使用计算属性非常方便,但是学到后面我们又会发现一个叫侦听器的东西。 那么问题来了,侦听器和计算属性,哪个更牛逼,哪个更好用? ...
  • asyncComputed 异步计算属性

    千次阅读 2020-07-17 15:42:32
    asyncComputed 异步计算属性 一、案例 假设这样一个场景: 一个列表数据 data 是通过接口返回,请求参数中有一个 id 的数据,这个 id 数据变化的话,需要重新请求接口获取数据。 按照普通方法来的话,需要按以下步骤...
  • Vue中的计算属性和监听属性

    千次阅读 2019-03-25 17:09:33
    Vue中的计算属性和监听属性 在项目中难免会遇到计算属性和监听属性,这两个都可以 监听数据的变化,但是又有些不同,在这里总结一下 1.computed计算属性 当需要监听一些数据需要随着其它数据变动而变动时,通常更好...
  • Vue过滤器与计算属性

    千次阅读 2017-08-29 16:41:47
    假设我们有一个重要的计算属性 A ,这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter !如果你不希望有缓存,请用 ...
  • Vue项目中如何使用computed计算属性

    千次阅读 2020-07-03 21:13:11
    文章目录computed:1、基本使用:1.1 应用场景:1.2 代码位置:1.3 值:2、复杂操作-结合data中数据:3、计算属性写法演变:3.1 计算属性的setter和getter:① 完整的计算属性写法:属性+方法② 计算属性一般只有get...
  • vue computed计算属性和watch监听事件

    千次阅读 2019-05-15 19:31:49
    我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性。 例如在下面这个例子中,如果我们使用监听函数,代码就会变得有点冗余。 <div id="demo"&...
  • vue的计算属性的使用

    千次阅读 2020-02-26 21:47:43
    vue中通过computed选项定义计算属性 计算属性 类似于 methods 选项中定义的函数 计算属性 会进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。 函数 每次都会执行函数体进行计算。 案例实现:输入数学...
  • vue中的计算属性computed

    千次阅读 2019-09-15 12:32:00
    目录 ...逻辑处理就是在计算属性内可以执行一些自己写的逻辑,数据监视就是计算属性内的返回值是依赖其他属性的变化而变化 一,计算属性的基本使用 <!DOCTYPE html> <html> <h...
  • vue 计算属性可以依赖其他计算属性 学习 例子 整理 记录 自学 前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div i...
  • vue计算属性与监视属性

    千次阅读 2020-12-15 16:47:29
    计算属性与监视属性 计算属性 在computed对象中定义计算属性的方法,在页面中使用{{方法名}} 监视属性 通过 vm对象中的$watch方法或者 watch配置来监视指定的属性, 当属性发生变化时,回调函数自动调用,在函数内部...
  • computed-计算属性

    千次阅读 2019-11-07 17:22:15
    computed computed和methods、watch最大的区别在于只有在当前的属性发生变化之后才会被触发。所以computed可以很大程度上提高优化的程度。
  • vue计算属性和方法的区别

    千次阅读 2020-02-07 13:38:34
    1.methods方法: 控制台打印: 当修改其中一个属性时,其他属性的值都没改变,但会发现methods里的...1).methods方法和computed计算属性,两种方式的最终结果确实是完全相同 2).不同的是计算属性是基于它...
  • vuex是单项数据流,在计算属性中只有get可以获取参数值,没有set不能改变参数值。 crowdmodel:{ get(){ return this.$store.state.crowdmodel; }, set(val){ this.$store.state.crowdmodel; } } 解决方法...
  • 如何控制Vue中计算属性刷新

    千次阅读 2020-07-24 20:43:55
    每当地图缩放一次后,都会重新计算坐标点(无论是在指定范围类变化还是在范围之间变化), 这样就造成了大量的性能问题(我骁龙865都明显感觉到不流畅了,毕竟几万条数据) 希望的结果是当数据在14以下的范围内或者...
  • 前言很多人提起 Vue 中的 computed,第一反应就是计算属性会缓存,那么它到底是怎么缓存的呢?缓存的到底是什么,什么时候缓存会失效,相信还是有很多人对此很模糊。本文以 Vue 2...
  • vue 计算属性传参数

    千次阅读 2020-06-12 00:08:49
    vue 计算属性传参数 <template> <div class="box"> <div>{{test}}</div> <!-- 报错 --> <!-- <div :class="test1(1)">{{test}}</div> --> <!-- 那么计算...
  • vue使用计算属性计算商品总价

    千次阅读 2020-10-28 21:31:56
    vue计算商品总价使用 ---- 计算属性 注 命名规则: 属性名称,方法名称,变量名称 尽量使用小驼峰命名法 computed:{ totalPrice() { let totalPrice = 0 for (let i = 0; i< this.books.length; i++) { ...
  • 浅谈Vue中计算属性computed的实现原理

    千次阅读 2018-12-18 21:11:55
    项,表明这是一个计算属性而不是非计算属性的观察者,我们来到 Watcher 构造函数的定义: class Watcher { constructor ( vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, ...
  • css之“计算属性

    千次阅读 2019-03-20 09:23:45
    no,no,no,这和vue的计算属性没有一点关系,所以这次介绍的也和vue无关。 相信大家和我一样,在开发中,也遇到过这样的问题: 我设计样式,多用百分比布局,这样在不同分辨率就不会出现特别大的偏差,但是也不能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,333,852
精华内容 533,540
关键字:

计算属性