1. 什么是计算属性

计算属性本质上就是一个function 函数，它可以实时监听data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。

计算属性指的是通过一系列运算之后，最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或methods 方法使用。示例代码如下：

2. 计算属性的特点

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

计算属性

特点：

1. 定义的时候，要被定义为“方法”

2. 在使用计算属性的时候，当普通的属性使用即可

好处：

1. 实现了代码的复用

2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

3. 如何声明计算属性

计算属性需要以function 函数的形式声明到组件的computed 选项中，示例代码如下：

注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有return 返回值！

4. 计算属性的使用注意点

① 计算属性必须定义在computed 节点中

② 计算属性必须是一个function 函数

③ 计算属性必须有返回值

④ 计算属性必须当做普通属性使用

5. 计算属性 vs 方法

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。因此计算属性的性能更好：

6、axios

axios 是一个专注于网络请求的库！

axios 的基本使用

1. 发起 GET 请求：

axios({// 请求方式method: 'GET',// 请求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查询参数params: {id: 1}}).then(function (result) {console.log(result)})

2. 发起 POST 请求：

document.querySelector('#btnPost').addEventListener('click', async function () {// 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！// await 只能用在被 async “修饰”的方法中const { data: res } = await axios({method: 'POST',url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}})console.log(res)})

Vue中计算属性和axios基本使用回顾相关推荐

关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
Vue的计算属性、侦听属性与过滤器解析
文章目录知识点计算属性计算属性的基本使用计算属性的 setter 和 getter 侦听属性计算属性与侦听属性对比过滤器过滤器使用方法过滤器应用场景综合小练习知识点计算属性计算 ...
Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义通过已有属性计算生成一个新的组合属性. 原理底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质计算属性的 ...
17.Vue的计算属性
目录 1.姓名案例插值语法实现 2.姓名案例methods实现 3.姓名案例计算属性实现 4.get什么时候会被调用? 5.set什么时候会被调用? 6.计算属性简写 7.总结我们这一节将通过一个小 ...
vue computed计算属性
文章目录前言一.计算属性介绍二.使用步骤 1.template中绑定计算属性 2.script中定义计算属性 3.计算属性的配置项 4.计算属性的简写总结前言 Vue中的计算属性(comup ...
vue的计算属性computed
计算属性的应用场景从已有的数据A中计算等到的新的数据B,使用计算属性如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式计算属 ...
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分
HTML之Vue框架计算属性computed的简单使用实现自动计算总分和平均分预计效果代码结果展示预计效果页面输入数学.物理.英语分数,自动计算出总分和平均分,并展示到界面,如下图所示代码 ...

Vue中计算属性和axios基本使用回顾