大前端学习- Vue 3.0 Composition API 快速入门

文章内容输出来源拉勾教育大前端高薪训练营本文主要围绕 Composition API来讲解如何使用，分别是以下几个API 函数, 通过学习，可以让你可以更快上手 Composition API ，把握 Vue.js 3.0 的新特性。生命周期钩子变化reactive APItoRefs APIref APIcomputed API变化watch API变化toRefs 原理watchEffect

柠条_

552人浏览 · 2020-09-26 21:09:43

柠条_ · 2020-09-26 21:09:43 发布

文章内容输出来源拉勾教育大前端高薪训练营

本文主要围绕 Composition API 来讲解如何使用，分别是以下几个API 函数, 通过学习，可以让你可以更快上手 Composition API ，掌握 Vue.js 3.0 的新特性。

生命周期钩子变化
reactive API
toRefs API
ref API
computed API变化
watch API变化
toRefs 原理
watchEffect API

1、Compostion API

安装Vue3.0 ，体验 createApp 的使用

npm install vue@3.0.0-rc.1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    x: {{ position.x }}
    y: {{ position.y }}
  </div>
  <script type="module">
    import { createApp } from './node_modules/vue/dist/vue.esm-browser.js'
    const app = createApp({
      data () {
        return {
          position: {
            x: 0,
            y: 0
          }
        }
      }
    })
    console.log(app)
    app.mount('#app')
  </script>
</body>
</html>

Vue 3.0 和 Vue2.0 的区别，成员要少很多，没有$开头，使用方式和以前一样

在这里插入图片描述

2、生命周期钩子函数

setUp 函数

import { createApp, reactive, onMounted, onUnmounted } from './node_modules/vue/dist/vue.esm-browser.js'
const app = createApp({
  setup () {
    // 第一个参数 props
    // 第二个参数 context， attrs， emit， slots
    const position = reactive({
      x: 0,
      y: 0
    })
    const update = e => {
      position.x = e.pageX;
      position.y = e.pageY;
    }
    
    onMounted (() => {
      window.addEventListener('mousemove', update)
    })

    onUnmounted (() => {
      window.removeEventListener('mousemove', update)
    })
    return {
      position
    }
  }
})
console.log(app)
app.mount('#app')

当鼠标移动的时候显示鼠标移动的位置，当组件卸载时，鼠标移动的事件也要移除

在这里插入图片描述

将获取鼠标位置的方法封装到一个函数中，优化代码

import { createApp, reactive, onMounted, onUnmounted } from './node_modules/vue/dist/vue.esm-browser.js'
function useMousePosition () {
  // 第一个参数 props
  // 第二个参数 context， attrs， emit， slots
  const position = reactive({
    x: 0,
    y: 0
  })
  const update = e => {
    position.x = e.pageX;
    position.y = e.pageY;
  }
  
  onMounted (() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted (() => {
    window.removeEventListener('mousemove', update)
  })
  return position
}
const app = createApp({
  setup () {
    const position = useMousePosition()
    return {
      position
    }
  }
})
console.log(app)
app.mount('#app')

3、reactive、toRefs 、ref 函数

都是创建响应式数据的

先看上一节出现的小问题

import { createApp, reactive, onMounted, onUnmounted } from './node_modules/vue/dist/vue.esm-browser.js'
function useMousePosition () {
  // 第一个参数 props
  // 第二个参数 context， attrs， emit， slots
  const position = reactive({
    x: 0,
    y: 0
  })
  const update = e => {
    position.x = e.pageX;
    position.y = e.pageY;
  }
  
  onMounted (() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted (() => {
    window.removeEventListener('mousemove', update)
  })
  return position
}
const app = createApp({
  setup () {
    // const position = useMousePosition()
    const { x, y} = useMousePosition()
    return {
      x,
      y
    }
  }
})
console.log(app)
app.mount('#app')

对useMousePosition进行解构后，数据不是响应式的了

这里的 position 是响应式对象，因为在useMousePosition中调用了reactive 函数，把传入的对象包装成了 Proxy 对象，也就是说 position 就是 proxy对象，当 position 访问 x, y的时候会调用代理中的 getter 拦截收集依赖，变化的时候会调用 setter

使用 toRefs

import { createApp, reactive, onMounted, onUnmounted, toRefs } from './node_modules/vue/dist/vue.esm-browser.js'
...
return toRefs(position)

toRefs原理

toRefs 要求传入的参数必须为代理对象，当前的 position 就是 reactive返回的代理对象，如果不是的话，会发出警告，提示传递代理对象,
内部会创建一个新的对象，然后遍历传入代理对象的所有属性,把所有属性的值都转换成响应式对象，相当于将postion 的x, y属性转换成响应式对象，
挂在到新创建的对象上，最后把新创建的对象返回。内部为代理对象的每一个属性创建一个具有 value 属性，value属性具有 getter，setter, getter 中返回对象属性的值，
setter中给代理对象赋值。所以返回的每一个属性都是响应式的

ref 把普通数据转转换成响应式数据，ref 可以把基本类型包装成响应式数据

<div id="app">
  <button @click="increase">点击</button>
  <span>{{ count }}</span>
</div>
<script type="module">
  import { createApp, ref } from './node_modules/vue/dist/vue.esm-browser.js'
  function useCount () {
    const count = ref(0)
    return {
      count,
      increase: () => {
        count.value++
      }
    }
  }
  createApp({
    setup() {
      return {
        ...useCount()
      }
    }
  }).mount('#app')
</script>

4、Computed

第一种用法

wacth(() => { count.value + 1})

第二种用法

const count = ref(1)

const plusOne = computed({
  get: () => {
    count.value + 1
  },
  set: val => {
    conut.value = val - 1
  }
})

<div id="app">
  <button @click="push">点击</button>
  未完成 {{ activeCount }}
</div>
<script type="module">
  import { createApp, reactive, computed } from './node_modules/vue/dist/vue.esm-browser.js'

  const  data = [
    {
      text: '看书',
      completed: false
    },
    {
      text: '敲代码',
      completed: false
    },
    {
      text: '学习',
      completed: false
    }
  ]

  createApp({
    setup() {
      const todos = reactive(data)
      const activeCount = computed(() => {
        return todos.filter(item => !item.completed).length
      })

      return {
        activeCount,
        push: () => {
          todos.push({
            text: '开会',
            completed: false
          })
        }
      } 
    }
  }).mount('#app')
</script>

5、Watch

Watch 的三个参数

第一个参数: 要监听的数据
第二个参数: 监听到数据变化后执行的函数，这个函数有两个参数分别是新值和旧值
第三个参数: 选项对象, deep 和 immediate
Watch 的返回值
取消监听的函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="app">
  请问一个 yes/no 的问题
  <input v-model="question"></input>
  {{answer}}
</div>
<script type="module">
  import { createApp, ref, watch } from './node_modules/vue/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const question = ref('')
      const answer = ref('')
      watch(question, async (newValue, oldValue) => {
        const response = await fetch('https://www.yesno.wtf/api')
        const data = await response.json()
        answer.value = data.answer
      })
      return {
        question,
        answer
      }
    }
  }).mount('#app')
</script>
</body>
</html>

6、watchEffect

是watch 函数的简化版本,也用来监视数据的变化
接收一个函数作为参数，监听函数内响应式数据的变化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="increase">increase</button>
    <button @click="stop">stop</button>
    <br>
    {{count}}
  </div>
  <script type="module">
    import { createApp, ref, watchEffect } from './node_modules/vue/dist/vue.esm-browser.js'

    createApp({
      setup() {
        const count = ref(0)
        const stop = watchEffect(() => {
          console.log(count.value)
        })
        return {
          count,
          stop,
          increase: () => {
            count.value++
          }
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

完整代码请点击这里

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生