Vue-4-属性方法与组件

2401_84152719

于 2024-05-06 18:11:58 发布

阅读量342

点赞数 4

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84152719/article/details/138503570

版权

程序员专栏收录该内容

186 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中侦听属性的使用、与计算属性的区别，以及如何在组件化应用中处理数据变动和数组变更。还探讨了Vue对数组方法的重写以及组件的定义、注册和数据管理机制。

摘要由CSDN通过智能技术生成

侦听属性

=======================================================================

一种更通用的方式来观察和响应 Vue 实例上的数据变动
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
侦听属性是在选项对象中使用 watch 字段来定义
计算属性与侦听属性区别

缓存，计算属性缓存后只调用一次，侦听属性调用几次则执行几次
计算属性是由一个或多个依赖项计算返回一个值，而侦听器是侦听一个数据的变化引起其它操作或一到多个数据变化

示例：


<body>

<div id="app">

  {{message}}

</div>

<script src="../libs/vue.js"></script>

<script>

  const vm=new Vue({

    el:"#app",

    data:{

      message:{name:"jack",age:20}

      //   message:"jack"

    },

    watch:{

      // message(newval,oldval){

      //     console.log(newval,oldval)

      // }

      //注释内容为下面内容简写形式

      

        message: {

            handler(newval,oldval){

                console.log(newval,oldval)

            },

            immediate:true,//立即执行

            deep:true,//深度监听，message对象里的内容

        }



    }

  })

</script>

方法，计算属性，侦听属性示例


<body>

<div id="app">

    <div>{{reseverFun()}}</div>

    <div>{{reseverFun()}}</div>



    <div>{{reseverComputed}}</div>

    <div>{{reseverComputed}}</div>



</div>

<script src="../libs/vue.js"></script>

<script>

    const vm=new Vue({

        el:"#app",

        data:{

            message:"hello world",

        },

        methods:{

            reseverFun(){

                console.log("方法改变")

                return this.message.split('').reverse().join('')

            }

        },

        computed:{

            reseverComputed(){

                console.log("计算改变")

                return this.message.split('').reverse().join('')

            }

        },

        watch:{

            message(newVal,oldval){

                console.log(newVal,oldval)

            }

        },



    })

</script>

</body>

/*

控制台输出说明方法执行几次则调用几次，而计算由于缓存原因只执行一次，当内容发生改变时，侦听事件启动

方法改变

方法改变

计算改变



vm.message='hello vue'

hello vue hello world

方法改变

方法改变

计算改变

'hello vue'

*/

数组变更

=======================================================================

变更方法

push() / pop()

unshift() / shift()

splice()

sort() / reverse()

vue 对这七个方法进行了重写，当调用这些方法进行数组修改时，会触发响应式渲染

替换数组

当调用非变更方法时，不会触发响应式渲染，则可以使用替换数组的方式来进行数组更新
当数组长度改为0时，不会触发响应式渲染

组件化应用构建

==========================================================================

组件，即构建应用程序所使用到的部件
组件系统，允许我们使用小型、独立和通常可复用的组件构建大型应用
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例


定义组件选项

const options = {

  template: '模板-视图的结构(布局)',

  data() {

    return {}

  },

}

注意：

template 中定义的结构，必须使用单个根元素包裹
data 必须是函数结构，在函数体内部返回一个普通对象

为什么 data 要是函数？

组件是可被复用的，当创建同一个组件的不同实例时，如果 data 是普通对象，则不同的实例引用到的是同一个 data 对象，当任意一个实例中对 data 数据进行更新时，其它实例都会受影响，通常这与实际业务不符
定义成函数，则创建各组件实例时，会调用 data 函数生成组件实例自身私有用到的对象数据，各组件实例间数据是独立的，互不受影响

注册组件

=======================================================================

全局注册


Vue.component(name, options)


全局注册的组件可在任意组件中使用到

局部注册


const options = {

  components: {

    name: componentOptions

  }
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/921787146ef82cbff136b2758f14eb1e.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/97567c9bf710223bed2269efe0ba9398.png)

![](https://img-blog.csdnimg.cn/img_convert/d812037544311e960c5cb0615daf74a6.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
...(img-NkuVhm4q-1714990307787)]

[外链图片转存中...(img-EflAzMZM-1714990307787)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**