Vue2中使用计算属性

计算属性的概念与使用场景主要有以下几点

1.初始化时，要显示的数据，不存在，需要通过计算操作得
2.执行的时机有2步: (1)初始化显示会执行一次（有特殊情况），拿到初始值，去显示。（2）当计算属性时，所依赖的数据发生改变时，会被从新渲染

为了方便理解下面有个例子

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><h1>{{title}}</h1><h1>{{index}}</h1><h1>{{fillname}}</h1></div><script>const vm = new Vue({       //vue 的实例el: "#app",data: {title: "学习vue",index: "计算属性"},computed: {fillname() {return this.title + this.index}}})console.log(vm);</script>

页面上有3个h1标签，分别用到了3个属性值，第一个和第二个标签显示的属性值，我们在data里面初始化定义过了，所以会显示对应的属性值，这没问题，并且data里面的值，被通过数据代理的方式代理到了，vue实例身上。但是请想一下，第3个h1标签里面的显示内容是什么呢？他的状态值，我们并没有在data里面定义，这时候又涉及到了一个新的，名叫计算属性。

计算属性，也就表示，他的属性值，并不是，固定的，而是依赖于，其他的属性值，通过计算操作而得到的结果，就是计算属性的属性值。所以 vue 里面有一个 computed 计算属性的方法，在这个方法里面，我定义了一个 fillname 的属性名，而它的属性值，就是我们 return返回出去的那个值，这里this，指向vue实例，所以我们可以拿到this身上的title 和index，把它们的属性值，通过字符串拼接，组成一个新的属性值，返回出去，这时候，第三个标签属性就拿到了值，并且，也挂载到了vue的实例身上

这里需要注意一点的是，这个计算属性，并不是，被_data代理出去的，而是被计算过后，直接挂载到vue实例身上的

如果我们通过更改，data里面的属性值，而计算属性，又依赖于data 里面的属性，所以，vue 实例监视到数据发生变化，会重新刷新视图页面

不过以这样的书写格式定义计算属性，还会有一个问题。但如果，我们直接通过，更改vm.fillname 计算属性的值，这里会报错，这里表示，计算属性，已经被分配给get方法了，而修改数据，需要set方法，而以函数的方式定义计算属性的话，vue实例默认帮忙调用的是get方法，，所以这里只能读写数据，而不能写入数据。

但如果，需要直接更改计算属性的数据，该怎么定义呢？get读取数据这个属性时，get方法被调用，页面初始化时，由于标签用到了计算属性，所以get会触发一次，并把返回值，给计算属性显示到页面。当我们修改这个属性值的时候，set方法触发，接收一个参数，就是，你修改的的那个值，然后拿到值，把值赋给自己所依赖那个属性，所依赖的值发生变化过后，自己的值，也就会动态更新了。

      computed: {fillname: {    //这里不要定义成函数简写，直接定义成对象，同时具有了set 和get方法set(value) {     //接收修改的值this.index = valueconsole.log("set被调用,修改数据", value);},get() {console.log("get被调用,读取数据");return this.title + this.index}}}

小提示，vue在加载页面的时候，也会去监控容器，上面说，页面初始化时候，会默认调用get方法，但是如果，我们在容器中根本就没有使用，这个计算属性，vue为了避免不必要的加载，所有get（）方法也不会被调用。

#########有不足的地方，欢迎大家补充交流学习

Vue2中使用计算属性相关推荐

Vue3学习之第三节：setup()中使用计算属性
vue2的方式写computed: 代码片段: data() {return {num1: 0,num2: 0,};},computed: {result() {return parseInt(thi ...
Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令在Vue.js 0.12版本之后使用自定义元素 ...
css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
React中的“计算属性”
React中的"计算属性" 相信许多学习过vue的小伙伴对计算属性都不陌生吧.计算属性能帮我们数据进行一些计算操作,计算属性是依赖于data里面的数据的,在vue中只要计算属性依赖 ...
五十八、Vue中的计算属性，方法和侦听器
@Author:Runsen @Date:2020/10/15 本篇是水篇,记录前端的学习,争取早日拿到前端offer 计算属性,方法和侦听器所以,对于任何复杂逻辑,你都应当使用计算属性.(官方原话 ...
Vue源码系列4：模拟实现vue3.x中的计算属性
前言计算属性,功能和vue2.x基本等同,本文主要对其功能进行模拟实现一.完整代码 const reactMap = new WeakMap(); const ReactiveFlags = {I ...
vue 带全选和多选的表格怎么写_vue中使用计算属性巧妙的实现多选框的“全选”...
接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...
vue3.0中使用计算属性时报错
原因:在组件使用了双向绑定,绑定的值是vuex的state的一个值.vuex是单项数据流,在计算属性中只有get可以获取参数值,没有set不能改变参数值. crowdmodel:{get(){retu ...
vue 中 computed 计算属性的用法
计算属性实质就是一个方法,只不过在使用的时候只把方法名称作为属性使用,不需要加(),而不是当做方法使用. 只有计算属性的方法内部所用到的任何data中的数据发生变化,就会立刻重新计算这个计算属性的值. ...

Vue2中使用计算属性

计算属性的概念与使用场景主要有以下几点

Vue2中使用计算属性相关推荐

最新文章

热门文章