首页 > 其他分享 >初识vue3——第一天

初识vue3——第一天

时间：2023-06-05 19:56:48浏览次数：71  
标签：count const 第一天 响应 value reactive 初识 vue3 ref

api查询地址

api请查阅vue3全部API

初始化实例

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：

// index.html
<div id="app"></div>
<script type="module" src="/src/main.js"></script>


// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App) // 创建实例
app.mount('#app') // 挂载实例

应用配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项，例如定义一个应用级的错误处理器，用来捕获所有子组件上的错误：

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

应用实例还提供了一些方法来注册应用范围内可用的资源应用实例还提供了一些方法来注册应用范围内可用的资源。以下是一些常用的api：

// 注册组件
app.component('my-component', {
  /* ... */
})
// 注册指令
app.directive('my-directive', () => {
  /* ... */
})
// 安装插件
app.use(MyPlugin)
// 应用一个全局 mixin
app.mixin(mixin)
// 提供一个全局值
app.provide('message', 'hello')

常用模板语法

由于此处的模板语法与vue2基本相同，不做过多介绍，只演示具体案例：

// 文本插值
<span>Message: {{ msg }}</span>
// 原始html
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
// 属性绑定
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
// 动态绑定多个值
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>
// 事件函数绑定
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
// 动态参数绑定
<a v-bind:[attributeName]="url"> ... </a>
<a :[attributeName]="url"> ... </a>
// 动态事件绑定
<a v-on:[eventName]="doSomething"> ... </a>
<a @[eventName]="doSomething">

注意：

  • 如空格和引号，在 HTML attribute 名称中都是不合法的，可以使用计算属性来代替。
    <a :['foo' + bar]="value"> ... </a> // 不合法
<a :[someAttr]="value"> ... </a> // 合法
  • 没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

响应式基础

响应式声明

我们可以使用 reactive() 函数创建一个响应式对象或数组：

import { reactive } from 'vue'
const state = reactive({ count: 0 })

要在组件模板中使用响应式状态，需要在 setup() 函数中定义并返回。

import { reactive } from 'vue'
export default {
  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      state,
      increment
    }
  }
}

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用 <script setup> 来大幅度地简化代码。

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

<script setup> 中的顶层的导入和变量声明可在同一组件的模板中直接使用。你可以理解为模板中的表达式和 <script setup> 中的代码处在同一个作用域中。

DOM 更新时机

当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只更新一次。
若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick() 这个全局 API：

import { nextTick } from 'vue'

function increment() {
  state.count++
  nextTick(() => {
    // 访问更新后的 DOM
  })
}

深层响应

在 Vue3 中，状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组，你的改动也能被检测到。

import { reactive } from 'vue'

const obj = reactive({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.nested.count++
  obj.arr.push('baz')
}

响应式代理

  • reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的;
  • 只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。
  • 为保证访问代理的一致性，对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身。
const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

reactive 的局限性

  • 仅对对象类型有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的原始类型无效。
  • 因为 Vue 的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失。

ref 创建响应对象

reactive() 的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制。为此，Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式：

import { ref } from 'vue'

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

和响应式对象的属性类似，ref 的 .value 属性也是响应式的。同时，当值为对象类型时，会用 reactive() 自动转换它的 .value。
一个包含对象类型值的 ref 可以响应式地替换整个对象：

const objectRef = ref({ count: 0 })

// 这是响应式的替换
objectRef.value = { count: 1 }

ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：

const obj = {
  foo: ref(1),
  bar: ref(2)
}

// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo)

// 仍然是响应式的
const { foo, bar } = obj

简言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到组合函数中。
当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} <!-- 无需 .value -->
  </button>
</template>

跟响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

ref 与 reactive 区别

在 Vue3 中，ref 和 reactive 都是响应式的 API，但是它们的用途不同。ref 用于创建简单的值类型变量，而 reactive 则用于创建复杂的对象。ref创建的变量需要使用 .value 来获取和修改其值，而 reactive 创建的对象需要使用解构赋值来获取和修改其属性值。当我们在开发 Vue3 应用时，需要根据具体的场景选择使用 ref 或者 reactive。在创建简单的值类型变量时，使用 ref 可以更方便地获取和修改其值。而当我们需要创建复杂的对象时，使用 reactive 可以更方便地进行响应式更新。

标签：count,const,第一天,响应,value,reactive,初识,vue3,ref
From： https://www.cnblogs.com/cxy-orange/p/17458771.html

相关文章

  • 数据结构第一天
    数据>数据元素>数据项 数据项是构成数据元素的不可分割的最小单位 数据是由数据项组成的，数据项是由数据元素组成的 数据元素-----组成数据的基本单位与数据的关系：是集合的个体 数据对象------性质相同的数据元素的集合与数据的关系：是集合的子集  数据元素......
  • Vue3 setup语法糖下的axios全局设置教程
    Vue3setup语法糖下的axios全局设置教程前言在Vue3的组件式API开发下，this关键词不再适用，网上很多配置axios教程都是以Vue2为基础的，在Vue3下不再适用。近期尝试用组件式API风格写项目，在配置全局axios就遇到了这个问题。经过我反复尝试，查阅官网的文档，终于有了以下解决方法：Vue2......
  • vue3学前准备
    vue3学前准备学习vue3的原因Vue3是一个面向未来的框架：Vue3相比Vue2有更好的性能和更好的扩展性，将来会成为前端开发的主流。改进的响应式系统：Vue3采用了Proxy对象来实现响应式系统，使得性能更高、内存消耗更小、支持动态添加属性等。同时，在Vue3中，开发者也可以更容易地......
  • 完成第一个 Vue3.2 项目后，使用体会
    第一次CompositionAPI在vue3.2中，正式支持了scriptsetup的写法,这样可以大大简化组件的代码量，减少一些重复操作，我认为当你写vue3时，应该把这当作默认写法。在vue3.2之前，一般会这样写。<script>exportdefault{setup(props,ctx){consta=ref(0)//必须......
  • 完成第一个 Vue3.2 项目后，使用体会
    第一次CompositionAPI在vue3.2中，正式支持了scriptsetup的写法,这样可以大大简化组件的代码量，减少一些重复操作，我认为当你写vue3时，应该把这当作默认写法。在vue3.2之前，一般会这样写。<script>exportdefault{setup(props,ctx){consta=ref(0)//必须......
  • 学习VUE第一天-环境的搭建
    1.创建vue项目流程:1)2) 3) 4) 5) 6) 7) 8) 9) 等待创建完毕后cd项目名称进入项目内部然后2.启动项目 npm run serve3.删除(不是必须)默认提供的vue文件,记住,删除要把router.js中的路由清空掉,不然会报错4.可以在vue.config.js......
  • vue3全局注册的另一种方式——插件注册
    1.新建一个index.ts，用于管理所有全局组件//引入项目中全部的全局组件importSvgIconfrom"./SvgIcon/index.vue";importPaginationfrom"./Pagination/index.vue";//全局对象constallGlobalComponent=<any>{SvgIcon,Pagination};//对外暴露插件对象exportde......
  • vue3 条件判断语句及v-if与v-show 区别
    <template> <divv-if="type==='a'">aaa</div> <divv-else-if="type==='b'">bbb</div> <divv-else>ccc</div>  <divv-show="flag">111</div> </template>......
  • vue3元素标签属性的绑定
    <template> <divv-bind:id="main"v-bind:class="message">aaa</div></template><script> exportdefault{   data(){      return{         message:'active',         main:'mainid' ......
  • Vue3 模板语法学习
    <template> {{message}} {{number+1}} {{ok?'yes':'no'}}</template><script> exportdefault{   data(){      return{         message:'aaa',         number:10,         ok:false      }   } }&l......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99