js中get和set关键字作用,js中的set和get机制

大家好，小编为大家解答js中get和set关键字作用的问题。很多人还不知道js中的set和get机制，现在让我们一起来看看吧！

Vue3.0中使用get方法和set方法的理解与使用

示例一：

get（）方法实现的前提是（get可以拿到需要进行双向绑定数据的值）在Vue3.0中可以通过xxx.value对ref中的数据进行获取

  setup(){
       //计算属性，当你需要依赖现有响应式,根据一定逻辑得到一个新数据。
       let age = ref(18)
      //  let newAge = computed(()=>{
      //     //该函数的返回值就是计算属性的值
      //     return age.value + 2;
      //  })
      //计算属性的高级用法
      //计算属性可以传对象
      let newAge = computed({
         //get方法获取计算属性的值
         get(){
            return age.value + 2;
         },
         //获取age的值将age的值增加2作为当前数据的值
         set(value){
           age.value = value - 2
         }
         //set获取的value是当前newAge的数据的值
      })
      //这样可以使用计算属性和v-model共同使用

          return {age,newAge}
   }

对get()和set()的理解：

注：假设num1是双向绑定中的初始值value,num2是双向绑定中的模板中需要绑定的数据的值,get，set是num2所在对象的属性Python解释器的安装步骤。

get获取num1的值返回，num2得到返回值这样就通过num1返回得到num2的数据，set通过设置自身对象的值去改变num1的值这样就实现了一个数据修改绑定的闭环。

实例使用get（）set（）完成简单的数据双向绑定

<template>
  <div class='contain'>
      <input v-model="age"/>
      <input v-model="newAge"/>
      <!-- 使用v-model绑定计算属性，计算属性不能修改 -->
  </div>
</template>

<>
import {ref,computed} from 'vue'
export default {
   name:'App',
   setup(){
       //计算属性，当你需要依赖现有响应式,根据一定逻辑得到一个新数据。
       let age = ref(20)
      //  let newAge = computed(()=>{
      //     //该函数的返回值就是计算属性的值
      //     return age.value + 2;
      //  })
      //计算属性的高级用法
      //计算属性可以传对象
      let newAge = computed({
         //get方法获取计算属性的值
         get(){
            return age.value ;
         },
         //获取age的值将age的值增加2作为当前数据的值
         set(value){
           age.value = value 
         }
         //set获取的value是当前newAge的数据的值
      })
      //这样可以使用计算属性和v-model共同使用

          return {age,newAge}
   }
}
</>

<style>

</style>

el共同使用

      return {age,newAge}

}
}