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

最新推荐文章于 2023-12-24 20:43:13 发布
最新推荐文章于 2023-12-24 20:43:13 发布
阅读量526 收藏 1
点赞数
分类专栏： 大前端学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35349493/article/details/108817022
版权

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

本文主要围绕 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>

完整代码请点击这里

柠条_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0入门
backpB的博客
04-23 759
vue生命周期：create mounte（挂载） update destory随着衍生8个钩子函数：beforecreate createdbeforemounted mountedbeforeupdate updatedbeforedestory destoried我们在左面创建一个文件夹vue，打开vscode选中该文件夹，在里面创建一个html文件：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ULqA4i4q-1682215194179)(C:\Use
Vue3.0 新特性全面探索 - 基于 Composition Api 快速构建实战项目
JKX_geek的博客
03-09 943
个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈 本项目综合运用了Vue3.0的新特性。 基于Composition API即Function-based API进行改造，配合Vue Cli，优先体验Vue3特性 使用单例对象模式进行组件通信 使用axios库进行网络请求，weui库实现 UI 界面 # 安装依赖 npm install #...
Vue3.0快速入门(速查)
Mr_Roki的博客
05-23 790
Vue也是基于状态改变渲染页面，Vue相对于React要好上手一点。有两种使用Vue的方式，可以直接导入CDN，也可以直接使用CLI创建项目，我们先使用CDN导入，学一些Vue的基本概念。
Vue3.0快速入门
weixin_40398599的博客
09-09 5416
一、安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm install vue@next 3. vue-cli 需要升级到Vue CLI v4.5 yarn global add @vue/cli@next # OR npm install -g @vue/cli@next 4. vite 使用 vite 体验更快速 #npm $ npm init vite-app &lt
vue3.0快速入门
promise466的博客
11-07 3903
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One PieceVue3.0使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hooks。
前端项目-零基础入门Vue3.0+TypeScript
01-06
在本文中，我们将深入探讨"前端项目-零基础入门Vue3.0+TypeScript"这一主题，这是一项针对初学者的教程，旨在帮助你掌握基于Vue3.0和TypeScript的前端开发技能。 Vue3.0是Vue.js框架的最新版本，它带来了许多性能...
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
Vue.js 3.0 是一款流行的前端JavaScript框架，用于构建用户界面。它的API在3.0版本中进行了重大更新和优化，提供了更好的性能和更简洁的语法。这份“Vue.js 3.0 API 官方手册 中文pdf版”是学习Vue 3的重要资源，它...
Vue3新特性——Composition API详解
热门推荐
ailsa_csdn的博客
03-01 1万+
本套笔记是学习尚硅谷视频教程所整理
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
这个压缩包“Vue.js 3.0从入门到实战【配套资源】.zip”包含了两个重要的子文件：书配套代码.zip和视频配套代码.zip，它们分别对应于学习Vue.js 3.0理论知识的书籍和实践操作的视频教程的源代码。 1. **Vue.js 3.0...
浅谈Vue3.0新版API之composition-api入坑指南
10-15
主要介绍了Vue3.0新版API之composition-api入坑指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【无标题】
最新发布
qq_51685537的博客
12-24 849
修改名字
前端 -- vue3快速入门
weixin_44289670的博客
04-20 321
基本类型数据。对象（或数组）类型数据。备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。setup() {console . log('sum变化了' , newValue , oldValue) } , {需要注意：watch监视的是reactive定义的响应式数据，强制开启了深度监视 deepconsole . log('info的name变化了' , newValue , oldValue) } , {
vue3.0快速上手
TheShuangY的博客
03-01 198
目录一、创建vue3.0的3种方式二、什么是Vite三、vue3.0兼容vue2.x四、vue2.x的问题 一、创建vue3.0的3种方式 + Vue-CLI + Webpack + Vite 二、什么是Vite Vite是Vue作者尤雨溪开发的一款意图取代webpack的工具 其实现原理是利用ES6的import会发送请求去加载文件的特性, 拦截这些请求, 做一些预编译, 省去webpack冗长的打包时间 安装Vite npm install -g create-vite-app 利用
Vue3快速上手
薛定谔的猫
04-24 403
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
VUE快速入门
LeeConnor的博客
05-04 251
1. 来自官网的vue介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 2. 后端开发使用VUE 对于我...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值