Vue3基础(一)___ref

简介: 本文介绍了Vue 3中的`ref`函数的使用方法,解释了在Vue 3的组合式API中如何通过`ref`创建响应式数据,并在模板中使用这些数据。文章通过示例代码展示了如何声明响应式数据、如何在方法中修改这些数据,以及如何将响应式数据和方法返回以在模板中使用。

首先我们需要搭建一个V3项目

我们可以使用
vue-cli
webpack
vite来快速搭建我们的项目,我们这里使用vite搭建项目
在cmd中

npm i -g create-vite-app

这样我们可以使用新的命令来搭建我们的项目了
在文件夹中继续cmd

create-vite-app myDomeName

我这里的名字是myVue3ViteDome0523,因为是提前搭建好的,就没有截图了。
进入到我们的项目文件夹

cd myVue3ViteDome0523
npm i //下载项目启动所需要的初始依赖

然后运行项目的时候我们有时候npm run serve//有时候npm run dev
我们自己来看一下package.json就一目了然了

{
   
  "name": "myVue3ViteDome0523",
  "version": "0.0.0",
  "scripts": {
   
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
   
    "vue": "^3.0.4"
  },
  "devDependencies": {
   
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }
}

这是一个json文件,我们可以看scripts所对应的value,里面是项目的启动命令和打包命令,所有我们要启动项目直接

npm run dev

默认运行在了3000端口
http://localhost:3000/
在这里插入图片描述
我们直接对我们的跟组件下手来学习基本语法。
Vue2相比Vue2来讲,data就是存放变量的,methods就是存放方法的,并且data中的每个数据都会被监听并且添加getter、setter方法,虽然这样感觉起来很好,但是一单我们的项目大了,就很难梳理,很不利于我们的维护。
在Vue3中,组合Api就解决了这个问题,当然不止这么问题。
话不多说,干代码

我们需要先了解一个比beforecreate还早的生命周期。setup,我们知道在created中才有我们的this、data、methods,显然在setup中肯定是没有他们的,这个时候我们怎么创建变量在页面上使用呢。

ref

引入

import {
    ref} from "vue";

这个时候我们直接使用这个方法创建一个响应数据。

<template>
  <div>
    <p>{
   {
   refDate01}}</p>
  </div>
</template>

<script>
import {
    ref } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let refDate01 = ref('我是使用ref创建的数据,我是一个字符串')
    return{
   refDate01}
  },
};
</script>

这个时候页面上上也显示了我们的refDate01
在这里插入图片描述
我们可以发现我们在setup中创建的响应式数据只有在setup中return暴露出去才能在我们的视图层使用。
我们想要改变这个refDate01 这个变量,这个时候我们可以写一个点击事件来改变它,

<template>
  <div>
    <p >{
   {
   refDate01}}</p>
    <button @click="changeRefDate01">我是改变refDate01数据的按钮</button>
  </div>
</template>

<script>
import {
    ref } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let refDate01 = ref('我是使用ref创建的数据,我是一个字符串')
    function changeRefDate01() {
   
        refDate01 = '我是改变后的数据'
    }
    return{
   refDate01,changeRefDate01}
  },
};
</script>

我们会发现当点击按钮的时候页面并没有发生变化,我们在点击的时候打印一下我们的refDate01 ,看一下它的结构
在这里插入图片描述
可以很清晰的看到,我们的数据放在了使用ref创建的对象key值为value的上面,
这个时候我们改一下我们的代码

<template>
  <div>
    <p>{
   {
    refDate01 }}</p>
    <button @click="changeRefDate01">我是改变refDate01数据的按钮</button>
  </div>
</template>

<script>
import {
    ref } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let refDate01 = ref("我是使用ref创建的数据,我是一个字符串");
    function changeRefDate01() {
   
      refDate01.value = "我是改变后的数据";
    }
    return {
    refDate01, changeRefDate01 };
  },
};
</script>

页面发生了变化,我们可以总结一下,在使用ref方法创建响应数据的时候他会将我们的值放到value上
我们尝试使用ref创建一个响应对象

{ {refDate02.name}}

{ {refDate02.age}}

在这里插入图片描述
显然没有问题,我们再尝试改变

<template>
  <div>
   <p>{
   {
   refDate02.name}}</p>
   <p>{
   {
   refDate02.age}}</p>
   <button @click="changeFun">我是按钮,点我</button>
  </div>
</template>

<script>
import {
    ref } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let refDate02 = ref({
   name:"zjq",age:18})
    function changeFun() {
   
      refDate02.value.name = 'newName'
      refDate02.value.age = 1888
    }
    return {
    refDate02,changeFun};
  },
};
</script>

显然是没有问题的,我们可以清晰的看到ref的特点,创建的时候都会到创建对象的value属性上获取我们的自己的数据首先要做的就是.value,还有要注意的就是我们再setup创建的变量、方法想在视图层使用都需要我们return出去才能正常使用,
今天我们就说着一个知识点。加油~明天讲解下一个知识点。

下面将代码换种写法:

<template>
  <div>
    <p>{
   {
    refDate02.name }}</p>
    <p>{
   {
    refDate02.age }}</p>
    <button @click="changeFun">我是按钮,点我</button>
  </div>
</template>
<script>
import {
    ref } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let {
    refDate02, changeFun } = changeObjFun();
    return {
    refDate02, changeFun };
  },
};
function changeObjFun() {
   
  let refDate02 = ref({
    name: "zjq", age: 18 });
  function changeFun() {
   
    refDate02.value.name = "newName";
    refDate02.value.age = 1888;
  }
  return {
    refDate02, changeFun };
}
</script>
目录
相关文章
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
146 64
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
117 60
|
12天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
44 3
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
41 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
34 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
44 1
|
2月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
2月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
2月前
|
JavaScript 前端开发 API
从Vue 2到Vue 3的演进
从Vue 2到Vue 3的演进
48 0
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
67 0

热门文章

最新文章