Vue的computed属性，该属性只读，如何现实修改？

阿尭

6648人浏览 · 2022-10-11 11:19:52

阿尭 · 2022-10-11 11:19:52 发布

computed:计算属性

本质上是一个属性, 定义时使用方法形式
一定有返回值,返回值是计算属性值
计算属性方法体中，用到响应式属性,只要数据变化，计算属性自动重新执行
计算属性特点: 缓存数据
获取计算属性值先从缓存中获取，只有依赖的响应式属性变化时才重新计算，默认只读
要改为可写，需要写成对象形式，设置getter setter方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>计算属性computed</title>
	</head>
	<body>
		<div id="app">
			<h2>作者{{author.name}}是否出版本书籍?</h2>
			<p>已出版本书籍 显示yes否则显示no</p>
			<h3>出版本书籍情况: <span>{{ isBooks }}</span></h3>
            <h3>{{fullName}}</h3>
            <button @click="updateIsBooks">确定</button>
		</div>

		<script src="../day2/lib/vue.global.js"></script>
		<script>
			const { createApp } = Vue

			const app =createApp({
				data() {
					return {
						author: {
							name: 'John Doe',
							books: ['javascript高级编程', 'css入门', 'vue3高级编程'],
						},
                        firstName:'Doe'
                       
					}
				},
				methods: {
                    updateIsBooks(){
                        this.isBooks = 'no'
                        this.fullName = '张三'
                        console.log(this.isBooks);
                    }
                },
                computed:{
                    isBooks(){
                        console.log('计算属性值');
                        return this.author.books.length>0?'Yes':'No'
                    },
                    // 定义成geter seter形式
                    fullName:{
                        get(){
                            console.log('get >>>');
                            return this.firstName
                        },
                        set(value){
                            console.log('value ',value)
                            this.firstName = value
                        }
                       
                    }
                }
			}).mount('#app')
		</script>
	</body>
</html>

这里的set(vallue)接收的是 this.fullName = '张三'，将张三的值传过来，设置给fullName，

computed属性只读不可写，所以我们需要创建一个对象，getter setter来完成我们属性修改。

效果如下，点击确实，更改名字。

计算属性特点：缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性缓存</title>
    <script src="../day1/lib/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>

    <script>
        const { createApp } = Vue
        const App = {
            data() {
                return {
                    message:'hello'
                }
            },
            methods: {
            },
            computed: {
                reverseMessage(){
                    console.log('执行计算属性 reverseMessage >>> ');
                    return this.message.split('').reverse().join('')
                }
            },

            /*html*/
            template: `<div>
                           <p>文本: {{message}}</p>
                           <p>反转文本: {{ reverseMessage }}</p>
                      </div>`
        }

        const app = createApp(App).mount('#app')
    </script>
</body>

</html>

输入message的值的时候，他本身就等于hello,所以会显示一个hello,是缓存的结果。

但是输入java，message的原来的值发生变化的时候，会执行计算属性重新计算。从而得到一个avaj。

计算属性例子：用于总价计算

其中计算方式可以使用for循环，也可以用Reduce方法

computed: {
totalPrice() {
// 计算总价
// let sum = 0
// for(let i = 0; i < this.list.length; i++){
// let product = this.list[i]
// sum = sum + product.price
// }
let sum = this.list.reduce((previous, current) => previous + current.price, 0)

return sum.toFixed(2)
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算总价</title>
    <script src="../lib/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>

    <script>
        const { createApp } = Vue
        const App = {
            data() {
                return {
                    list: [
                        { id: 1001, name: 'javascript高级编程', price: 88.89 },
                        { id: 1002, name: 'vue高级编程', price: 118.88 },
                    ],
                }
            },
            methods: {
                //添加商品
                bindAddBook(){
                    let product = {id:1003,name:'react高级编程',price:200}
                    this.list.push(product)
                }
            },
            computed: {
                totalPrice() {
                    // 计算总价
                    // let sum = 0
                    // for(let i = 0; i < this.list.length; i++){
                    //     let product = this.list[i]
                    //     sum = sum + product.price
                    // }
                    let sum = this.list.reduce((previous, current) => previous + current.price, 0)

                    return sum.toFixed(2)
                }
            },

            /*html*/
            template: `<div>
                            <table>
                                <tr>
                                    <th>序号</th>
                                    <th>名称</th>
                                    <th>价格</th>
                                </tr>    
                                <tr v-for="item,index in list">
                                    <td>{{item.id}}</td>
                                    <td>{{item.name}}</td>
                                    <td>{{item.price}}</td>
                                </tr>
                            </table>
                            <h2>总价: <span>{{totalPrice}}</span></h2>
                            <button @click="bindAddBook">添加商品</button>
                      </div>`
        }

        const app = createApp(App)
        app.mount('#app')
    </script>
</body>

</html>

深度监听/侦听属性watch，

监听一个对象的时候要加deep:true;
需要立即执行的时候加： immediate:true

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport