vue之计算属性与监听属性

一、计算属性

1、什么是计算属性--computed

计算属性是Vue中的⼀种特殊属性，⽤于对已有的数据进⾏计算和衍⽣，以⽣
成新的数据。计算属性的值是根据依赖的数据动态计算得出的，当依赖的数据
发⽣变化时，计算属性会⾃动重新计算。

2、计算属性的作用

计算属性的主要作⽤是对数据进⾏处理和转换，以便在模板中进⾏展示或其他逻辑
操作。相⽐于在模板中直接使⽤⽅法来处理数据，计算属性具有以下优势：

缓存结果： 计算属性的值会被缓存起来，只有在依赖的数据发⽣变化时才会重
新计算。这样可以避免不必要的重复计算，提⾼性能。
响应式更新： 计算属性会⾃动追踪依赖的数据，当依赖的数据发⽣变化时，计
算属性会⾃动重新计算，保持数据的实时性。
简化模板逻辑： 通过使⽤计算属性，可以将复杂的逻辑处理和转换操作放在计
算属性中，简化模板中的代码，使模板更加清晰和易读

3、计算属性的定义方式

· 基础定义方式

computed: {
 // 计算属性的名称
 propertyName: function() {
 // 计算属性的逻辑处理
 // 返回计算结果
 return result;
 }
}

· 默认只有getter计算属性

<div id="app">
 <input type="text" v-model="firstName"> +
 <input type="text" v-model="lastName"> =
 <span>{{fullName}}</span>
</div>
<script>
 // 创建 Vue 实例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 firstName: 'jack',
 lastName: 'chen'
 },
 methods: {},
 computed: { // 计算属性； 特点：当计算属性中所以来的任何⼀个 data 属性改变之
后，都会重新触发 本计算属性 的重新计算，从⽽更新 fullName 的值
 fullName() {
 return this.firstName + ' - ' + this.lastName;
 }
 }
 });
</script>

  • 定义有getter和setter的计算属性

<div id="app">
 <input type="text" v-model="firstName">
 <input type="text" v-model="lastName">
 <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
 <input type="button" value="修改fullName" @click="changeName">
 <span>{{fullName}}</span>
</div>
<script>
 // 创建 Vue 实例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 firstName: 'jack',
 lastName: 'chen'
 },
 methods: {
 changeName() {
 this.fullName = 'TOM - chen2';
 }
 },
 computed: {
 fullName: {
 get: function () {
 return this.firstName + ' - ' + this.lastName;
 },
 set: function (newVal) {
 var parts = newVal.split(' - ');
 this.firstName = parts[0];
 this.lastName = parts[1];
 }
 }
 }
 });
</script>

4、通过计算属性实现名字首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">

    <input type="text" v-model="name">--》》{{newName}}
    <hr>
    <input type="text" v-model="name1">---》{{name1}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name1: ''
        },
        methods: {
            // 普通函数形式
            handleToUpper() {
                console.log('函数我执行了')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        },
        computed:{
            newName(){
                console.log('计算属性我执行了')
                return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
            }
        }
    })
</script>
</html>

5、计算属性写过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <input type="text" v-model="myText">
    <hr>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'],

        },
        computed:{
            newdataList(){
                return this.dataList.filter(item=> item.indexOf(this.myText) >= 0)
            }
        }
    })

</script>
</html>

二、监听属性

1、什么是监听属性---watch

监听属性是Vue中的⼀种特殊属性，⽤于监测数据的变化并触发相应的回调函
数。通过监听属性，我们可以在数据发⽣改变时执⾏⼀些额外的逻辑操作。

2、监听属性的作用

监听属性的作⽤是在数据发⽣变化时，执⾏⼀些副作⽤操作或触发其他的逻辑。它可以⽤于响应数据的变化并进⾏相应的处理，⽐如数据的验证、异步操作、触发其他组件的更新等。

3、监听属性的定义方式

在watch对象中，可以定义多个属性的监听器，每个属性对应⼀个回调函数。当被监听的属性发⽣变化时，Vue会⾃动调⽤对应的回调函数，并传递新值和旧值作为参数。

  • 基础定义⽅式

 // 被监听的属性名
 propertyName: function(newVal, oldVal) {
 // 在属性变化时执⾏的逻辑操作
 }
}

  • 监听data中属性的改变

<div id="app">
 <input type="text" v-model="firstName"> +
 <input type="text" v-model="lastName"> =
 <span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 firstName: 'jack',
 lastName: 'chen',
 fullName: 'jack - chen'
 },
 methods: {},
 watch: {
 'firstName': function (newVal, oldVal) { // 第⼀个参数是新数据，第⼆个参
数是旧数据
 this.fullName = newVal + ' - ' + this.lastName;
 },
 'lastName': function (newVal, oldVal) {
 this.fullName = this.firstName + ' - ' + newVal;
 }
 }
 });
</script>

  • 监听路由对象的改变

<div id="app">
 <router-link to="/login">登录</router-link>
 <router-link to="/register">注册</router-link>
 <router-view></router-view>
</div>
<script>
 var login = Vue.extend({
 template: '<h1>登录组件</h1>'
 });
 var register = Vue.extend({
 template: '<h1>注册组件</h1>'
 });
 var router = new VueRouter({
 routes: [
 { path: "/login", component: login },
 { path: "/register", component: register }
 ]
 });
 // 创建 Vue 实例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {},
 methods: {},
 router: router,
 watch: {
 '$route': function (newVal, oldVal) {
 if (newVal.path === '/login') {
 console.log('这是登录组件');
 }
 }
 }
 });
</script>

三、计算属性和监听属性的区别

computed属性的结果会被缓存，除⾮依赖的响应式属性变化才会重新计算。主要当作属性来使⽤,使⽤的时候不加（）；

methods⽅法表示⼀个具体的操作，主要书写业务逻辑；

watch⼀个对象，键是需要观察的表达式，值是对应回调函数。主要⽤来监听某些特定数据的变化，从⽽进⾏某些具体的业务逻辑操作；可以看作是computed和methods的结合体

总结来说，计算属性⽤于对已有的数据进⾏处理和转换，⽣成新的数据；⽽监听属性⽤于监测数据的变化并执⾏相应的副作⽤操作。它们在Vue开发中都有各⾃的应⽤场景，根据实际需求选择使⽤。
posted @ 2024-04-28 20:29  Unfool  阅读(368)  评论(0)    收藏  举报