Vue3 Options API

纯荔枝ikun
1,052 阅读6分钟

复杂data的处理方式

我们知道,在模板中可以直接通过插值语法显示一些data中的数据

template 中使用 {{}} 语法显示data中定义的数据

但是某些情况下,我们需要对多个data数据进行运算,三元运算符来决定结果,数据进行

某种转化

image.png

在插值表达式中进行简单的运算,而不是复杂的逻辑运算

在模板中放入太多的逻辑会让模板过重难以维护

有一种方法就是将逻辑抽取到一个method中

另外一种就是计算属性 computed

对于任何含响应式数据的复杂逻辑,你都应该使用计算属性

计算属性将被汇入到组件实例中,所有的getter 和 setter 和 this的上下文自动

绑定为组件实例

image.png

image.png

在mustache语法中存在这样的语法的话,会存在很大的缺点,不便于维护

当有多次一样的逻辑的时候,存在重复的代码

多次使用的时候,很多运算也需要多次执行,没有缓存

如果进行相加的话,这里的过程是相加了5次的,其实效率的话是比较低的

computed 就会有缓存

这里的getReuslt 是没有实例的

split(" ") 切割

reverse() 进行一个翻转

join(" ") 进行一个拼接

这里我们的逻辑更好了

不直观,并且调用多次方法的时候,并没有进行缓存,而是会多次的调用

<!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>Document</title>
</head>
<body>
  <div id="li">

  </div>
  <!--使用的模板 -->
  <template id="app">

  </template>
  <!-- 通過CDN的方式導入 -->
  <script src="https://unpkg.com/vue@3">

  </script>

  <script>
    Vue.createApp({
      template:'#app',
      data()
      {
        return {

        }
      },
      methods:{

      },
      computed:{
        // 定义一个属性叫做fullname
        // 其实这里是一个getter | setter 调用
        // 自动绑定组件的实例
        fullname() 
        {
          
        }
      }
    }).mount('#li')
  </script>
</body>
</html>

计算属性在性能上也是有一个提升

三种案例的实现

computed 对于data数据进行复杂的逻辑处理

计算属性是有缓存的

计算属性只会执行一次,方法会执行多次

当我们多次使用计算属性中的运算只会执行一次的

data中的数据都是响应式的,这个涉及到响应式的原理

虽然这里用了很多次,但是只会使用一次,计算属性会根据依赖数据发生改变进行重新的计算,以后就会使用缓存下来的值

计算属性的实现原理道理有什么

computed 一定是使用方法的

哪里会使用到计算属性,哪里会使用到方法,后面在项目中都是可以体现出来的

计算属性的setter 和 getter

一般情况下只需要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>Document</title>
</head>
<body>
  <div id="li">

  </div>
  <!--使用的模板 -->
  <template id="app">

  </template>
  <!-- 通過CDN的方式導入 -->
  <script src="https://unpkg.com/vue@3">

  </script>

  <script>
    Vue.createApp({
      template:'#app',
      data()
      {
        return {

        }
      },
      methods:{

      },
      computed:{
        // 定义一个属性叫做fullname
        // 其实这里是一个getter | setter 调用
        // 自动绑定组件的实例
        fullName:{
          get:function() 
          {
            return this.name
          },
          set:function(newValue)
          {
            this.name = newValue
          }
        }

      }
    }).mount('#li')
  </script>
</body>
</html>

这里可以传入一个对象 或者是 一个函数之间的区别

后面讲源码的一个过程

image.png

这里是说,如果是一个函数的话,会调用里面的get() 方法

如果是一个对象的话,会先调用set方法,然后调用get方法

当计算属性的值被修改时，会触发 setter 函数，执行自定义的操作

读源码的时候,需要知道ts的源码,在setter里面进行参数的传递

对于属性的获取的话,一般称为getter

对于属性的修改的话,一般称为setter

这里不能用箭头函数,如果使用箭头函数的话,this的绑定就会有问题了

函数里面只有getter,对象里面有setter 和 getter

在很多语言中都是有这样的一种叫法

大多数的情况下,一般只写一个函数

Noop 是空的数组的实现

认识侦听器 watch

image.png

这里用一个监听器,watch

比如说有一个输入框,当我们在里面输入数据的时候,就会立刻去查找最新的答案

我们需要监听这个东西的变化

监听数据,进行一些逻辑的处理,我们就需要监听数据的变化

watch 来进行数据的监听

//question监听的data中的属性的名称

// 这里面有两个参数

第一个值是变化后的新值,第二个是变化前的旧值 question(newValue,oldValue)

watch案例

<!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>Document</title>
</head>
<body>
  <div id="li">

  </div>
  <!--使用的模板 -->
  <template id="app">
    您的问题:<input type="text" v-model="message" placeholder="请输入您的问题"/>
    <div>
      您的答案为:<span>{{value}}</span>
    </div>
  </template>
  <!-- 通過CDN的方式導入 -->
  <script src="https://unpkg.com/vue@3">

  </script>

  <script>
    Vue.createApp({
      template:'#app',
      data()
      {
        return {
          message:'',
          value:''
        }
      },
      watch:{
        message(newValue,oldValue)
        {
          console.log('newValue:' + newValue)
          if(newValue == '你好呀')
          {
            this.value = '会话'
          }
          else
          {
            this.value = '空'
          }
        }
      },
      methods:{

      }
    }).mount('#li')
  </script>
</body>
</html>

watch案例结果

image.png

就会执行里面的逻辑

对于axios的一个操作库进行一个封装的操作

想要侦听里面的处理的话,进行一个侦听的操作

一般很少使用监听器来处理计算属性

Vue的声明周期后面会讲update

处理网络请求的时候使用的是侦听器

绑定当前的实例对象

image.png

watch 里面的类型有很多,后面可以跟很多的类型,以后去阅读 官方文档的时候,去读懂里面的东西

在服务器里面来查找答案

侦听器的配置选项

这里也可以打印一个新的数组 或者是 一个新的对象

这里的数据返回的data是交给响应式系统来进行处理的

后面专门讲响应式的布局

点击界面会进行响应的,一个是改info整个对象,一个是改变对象

里面的值

默认情况下我们的侦听器只会针对监听的数据本身的改变,内部

发生的改变不会进行监听

深度侦听:

info 这里可以跟着一个函数,也可以跟着一个对象

image.png

和上面的效果是一样的,是一种语法糖的格式

改变info

里面的值可以改成 deep:true

设置成一个深度的侦听

不管多深度的东西都可以进行监听

侦听器选项

deep 深度监听

// 深度监听,立即执行一次

immediate: true // 设置深度监听,立即执行

对于对象中属性进行监听

内部没有做一个拷贝

应该先进行一个拷贝

就会有这样的一个问题

改变之前先进行一次深度的拷贝

image.png

只是会监听引用的变化,不会监听到内部属性的变化

侦听器watch的其他方式

// 字符串方法名 b:"方法名"

如果想要监听对象中内部属性,可以使用"obj.name"的方式

如果想要侦听'info.name': { handler(newValue,oldValue) {

}, deep:true, immediate:true } 在Vue2中的侦听器中可以找到这样的一种用法

这里内部Vue会做一个解析,如果obj.name的值发生改变的话,就会

执行侦听器

created() 生命周期函数

$watch 生命周期函数

里面有两个参数第一个是data数据名,第二个是侦听函数 第三个是配置选项

image.png

这里还有一个返回值,可以用来取消侦听

jsx 是在 js 上进行了一个补充

现在在Vue3的代码中是没有办法显示过滤器的,已经把过滤器的API删除了,推荐两种办法 // Vue3不支持过滤器

image.png

使用转化后的book中的plus

这里的前面都是有人民币符号的

推荐是对于数据进行一个转化的

image.png

指向同一个引用地址,现在是对新的对象进行了一个拷贝的过程

从服务器中返回的数据需要对数据进行一个转化,需要使用map高阶函数

针对这样的案例会整洁一点

定义在跟的组件里面,其实可以放在config里面的

比如放上一个方法,可以在任意的地方可以取出来这样的一个方法

在Vue3中不支持这样的fillter

这里显示的就是综合性的案例,这样的知识做一个综合性的练习

avatar
文章
阅读
粉丝