vue中的get和set是什么意思 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

在Vue中，get和set是属性的访问器函数。它们用于在获取和设置属性值时进行自定义逻辑处理。

get：
get用于定义属性的获取逻辑。当访问属性时，会调用get函数并返回相应的值。例如：
```
data() {
  return {
    name: 'Vue'
  }
},
computed: {
  fullName() {
    return this.name + '.js';
  }
}
```
在上述代码中，fullName是一个计算属性。当访问fullName时，会调用fullName的get函数并返回"name + '.js'"的值，也就是"Vue.js"。
set：
set用于定义属性的设置逻辑。当修改属性时，会调用set函数并执行相应的操作。例如：
```
data() {
  return {
    count: 0
  }
},
watch: {
  count(newValue) {
    console.log('count值发生变化，新值为：', newValue);
  }
}
```
在上述代码中，count是一个响应式数据，在其值发生变化时，会调用count的set函数并执行watch函数中的逻辑，打印出新的count值。

总结：
get和set是属性的访问器函数，用于在Vue中自定义属性访问的逻辑。get用于定义属性的获取逻辑，而set用于定义属性的设置逻辑。通过get和set，我们可以对属性访问进行自定义处理，以满足我们的需求。

2年前 0条评论

worktile

Worktile官方账号

在Vue中，get和set是"Vue的属性访问器"。它们是在Vue组件中用于定义和使用响应式数据的一种方式。

get：get是一个函数，用于获取属性的值。当访问Vue组件的属性时，get函数会被调用，并返回属性的值。这样一来，在模板中使用属性时，实际上是在调用get函数来获取属性的值。get函数可以进行一些逻辑处理，比如从数据库中获取数据，进行计算等等。
set：set是一个函数，用于设置属性的值。当修改Vue组件的属性时，set函数会被调用，并传入新的属性值作为参数。在set函数中，可以对新的属性值进行处理，并更新实际存储属性的值。这样一来，当修改属性时，不仅仅是简单的修改属性的值，还可以进行一些额外的处理操作。
响应式数据：在Vue中，通过使用get和set函数，可以实现响应式数据的自动更新。当Vue组件中的属性被修改时，Vue会自动调用set函数，并将新的属性值传递给它。set函数可以根据需要进行一些逻辑处理，并将处理结果更新到实际存储属性的值上。这样，Vue会自动检测到属性值的变化，并触发相应的UI更新。这种机制可以极大地简化数据的管理和UI的更新，提高开发效率。
计算属性：在Vue中，可以使用计算属性来定义一些基于响应式数据的属性。计算属性实际上是在get函数中定义的属性，Vue会自动调用get函数来获取它的值。计算属性可以对其他属性进行一些计算操作，并返回结果。当计算属性依赖的属性发生变化时，Vue会自动重新计算计算属性的值，并触发相应的UI更新。这使得我们可以方便地进行复杂的数据处理和UI更新。
监听器：除了使用计算属性，还可以使用watch监听属性的变化。通过watch函数，可以监听一个或多个属性的变化，并在变化发生时执行一些自定义的函数。这样一来，可以在属性发生变化时执行一些额外的操作，比如发送请求，更新其他组件等等。watch函数接收两个参数，第一个参数是要监听的属性，第二个参数是一个函数，用于处理属性变化时的逻辑操作。当被监听的属性发生变化时，Vue会自动调用watch函数，并传入新值和旧值作为参数。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue中，get和set分别是对象的属性访问器方法，用于获取和设置属性的值。它们可以用于Vue的响应式系统中，实现数据的监听和更新。

在Vue中，可以通过在data对象中定义属性来创建响应式的数据。这些属性可以被视图模板绑定和监听，当其值发生改变时，视图会自动更新。而get和set方法就是用来实现这种自动更新的机制。

具体来说，当访问一个响应式数据属性时，会自动调用该属性的get方法，而当修改一个响应式数据属性时，会自动调用该属性的set方法。

在Vue实例化时，Vue会遍历data对象中的所有属性，并使用Object.defineProperty方法将这些属性转换为getter和setter，从而实现数据的监听。

下面是使用get和set的基本操作流程：

定义需要响应式的数据属性，可以在Vue实例的data对象中定义或者直接定义在Vue组件中的data选项中。

data: {
  message: 'Hello Vue.js!'
}

在模板中使用该属性，通过{{}}或v-bind指令绑定属性值。

<div>{{ message }}</div>

当模板中使用该属性时，会自动调用该属性的get方法，获取到属性的值，并显示在视图中。
当修改该属性的值时，会自动调用该属性的set方法，更新属性的值。

this.message = 'Updated message';

当属性的值发生改变时，系统会自动触发更新，重新渲染模板，更新视图中的显示。

通过使用get和set方法，Vue实现了数据的响应式更新，使得我们可以方便地通过修改数据来更新视图。这也是Vue框架中响应式系统的核心机制之一。

2年前 0条评论