【vue讲解：vue3介绍、setup、ref、reactive、监听属性、生命周期、toRef、setup写法】

于 2024-08-17 16:59:28 发布
阅读量202 收藏
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50556117/article/details/141283325
版权

1 vue3介绍

# Vue3的变化
	-vue3完全兼容vue2---》但是vue3不建议用vue2的写法
	-拥抱TypeScript
    	-之前咱们用的JavaScript---》ts完全兼容js
    - 组合式API和配置项API
    	vue2 是配置项api
        vue3 组合式api
        
        
# vue4必须要用

2 vue3项目创建和启动

# 创建vue3项目
	-vue-cli   官方不太建议用了
    -vite      目前官方推荐：新一代前端构建工具

# vue-cli创建
	-命令行中：vue create vue3_demo001
    -其他跟之前一样，只是选vue版本选3版本
    -使用pycharm打开---》配置启动--》跟之前一样

2.1vue3的项目简单解释

### main.js
import { createApp } from 'vue' # 通过 createApp创建vue实例
import App from './App.vue'  # 根组件
import router from './router' # vue-router
import store from './store' #vuex

var vue = createApp(App) # 创建vue实例
vue.use(store)#使用vuex
vue.use(router)# 使用vue-router
vue.mount('#app')# 挂在index.html中得div


### 其他写起来跟之前写vue2完全一致，vue3是兼容的

2.2 vite创建vue3

# 速度很快
	-创建项目还是运行项目
# 按需编译，不再等待整个应用编译完成


# 创建项目
	cnpm create vite vue3_demo002
    # 打开项目，安装依赖
    cnpm install 
    
    # 运行项目
    npm run dev
    # pycharm运行项目
  
# 使用vite和vue3创建项目的文件简单解释
	# main.js	
    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    createApp(App).mount('#app') # 没有使用第三方插件
    
    # HelloWorld.vue   组合式api写法，跟之前不一样了
    <script setup>
    import { ref } from 'vue'
    defineProps({
      msg: String,
    })
    const count = ref(0)
    </script>
    <template>
      <h1>{{ msg }}</h1>
      <div class="card">
        <button type="button" @click="count++">count is {{ count }}</button>
      </div>
    </template>


    
    
# 后期我们可以自己引入 vuex，pina，vue-router，代码需要自己写
# 实现：创建vue2一样，自由选择一些插件
	-以后再vue3上，建议使用pinia 做状态管理
npm create vue@latest  # 常用的第三方插件，自己选即可

在这里插入图片描述

3 setup

# 1 vue3_demo001 :vue-cli创建的---》写法跟之前vue2一样
	先在这上面讲
# 2 vue3_demo002 ：vite创建，但是没有状态管理器和路由 （不用它了）
# 3 vue3_demo003：vite创建，有状态管理器和路由  在这上面讲


# setup 函数，只有vue3中有
    setup为Vue3.0中一个新的配置项，值为一个函数
    setup是所有Composition API（组合API）编写的位置
    组件中所用到的：数据、方法等等，均要配置在setup中
    setup函数的返回值：返回一个对象，对象中的属性、方法, 在模板中均可以直接使用
#注意：
    尽量不要与Vue2.x配置混用
    Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
    但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
    如果有重名, setup优先。

<template>
  <div class="home">
    <h1>setup函数的使用</h1>
    {{ name }}--{{ age }}
    <br>
    <button @click="add">点我年龄+1</button>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  setup() {
    // vue3多的，vue2没有，以后建议vue3的代码全都写在这里，不再写配置项方式了
    // 1 定义变量,跟正常写js一样
    let name = 'lqz'
    let age = 19
    // 2 定义一个函数，点击按钮，年龄加一的函数
    let add = () => {
      // alert('111')
      // 让年龄+1，出问题了,变量确实会变，但是页面不会变化---》vue3定义的变量，默认不是响应式的
      age++
      console.log(age)

    }
    // 3 必须要有返回值，是个对象,返回的对象，可以在 模板（template）中使用
    return {name, age, add}

  },
}
</script>

4 ref

# ref 用来做 基础变量[数字，字符串，布尔]的响应式
# reactive用来做 对象[数组，字典]的响应式

<template>
  <div class="home">
    <h1>setup函数的使用</h1>
    {{ name }}--{{ age }}
    <br>
    <button @click="add">点我年龄+1</button>
    <br>
    <button @click="handleChange('彭于晏')">点我变彭于晏</button>
  </div>
</template>

<script>

import {ref, reactive} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    // vue3多的，vue2没有，以后建议vue3的代码全都写在这里，不再写配置项方式了
    // 1 定义变量,跟正常写js一样
    let name = ref('lqz')
    // let age = 19  // 没有响应式
    let age = ref(19)  // 有响应式,变成对象了
    // 2 定义一个函数，点击按钮，年龄加一的函数
    let add = () => {
      // alert('111')
      // 让年龄+1，出问题了,变量确实会变，但是页面不会变化---》vue3定义的变量，默认不是响应式的
      // age++   自增，就不能这么写了
      age.value++  //有响应式
      console.log(age.value)

    }
    let handleChange = (n) => {
      name.value = n  //有响应式

    }
    // 3 必须要有返回值，是个对象,返回的对象，可以在 模板（template）中使用
    return {name, age, add, handleChange}

  },
}
</script>

5 reactive

<template>
  <div class="home">
    <h1>setup函数的使用</h1>
    <p>用户名：{{ userInfo.name }}</p>
    <p>年龄：{{ userInfo.age }}</p>
    <p>爱好：{{ userInfo.hobby }}</p>

    <button @click="handleAdd">点我年龄+1</button>
  </div>

</template>

<script>

import {ref, reactive} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    let userInfo = reactive({
      name: 'lqz',
      age: 19,
      hobby: '篮球'
    })

    let handleAdd = () => {
      userInfo.age++
      console.log(userInfo)
    }
    return {userInfo, handleAdd}
  },
}
</script>

5.1 ref和reactive总结

# ref函数
    作用: 定义一个响应式的数据
    语法: let xxx = ref(initValue)
    创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
    JS中操作数据： xxx.value
    模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
    # 备注：
    接收的数据可以是：基本类型、也可以是对象类型。
# reactive函数
    作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
    语法：let 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
    reactive定义的响应式数据是“深层次的”,对象无论多少层，都可以

6 监听属性-计算属性

6.1 计算属性

<template>
  <div class="home">
    <h1>计算属性：computed</h1>
    <p>姓：<input type="text" v-model="person.firstName"></p>
    <p>名：<input type="text" v-model="person.lastName"></p>
    <p>全名：{{ person.fullName }}</p>
    <p>全名修改：<input type="text" v-model="person.fullName"></p>
  </div>

</template>

<script>

import {ref, reactive, computed} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    let person = reactive({
      firstName: '',
      lastName: ''
    })
    // 计算属性--->获取值
    // person.fullName = computed(() => {
    //   return person.firstName + person.lastName
    // })
    // 计算属性---》修改值
    person.fullName = computed({
      get() {
        return person.firstName +person.lastName
      },
      set(newValue) {
        console.log(newValue)
        person.firstName=newValue.substring(0,1)
        person.lastName=newValue.slice(1)
      }
    })
    return {person}
  },
}
</script>

6.2 监听属性

<template>
  <div class="home">
    <h1>监听属性：watch</h1>
    {{ age }} ====
    <button @click="handleClick">点我+1</button>
    <hr>
    <p>用户名：{{ userInfo.name }}</p>
    <button @click="handleChange">点我变长名字</button>
  </div>

</template>

<script>

import {ref, reactive, watch, computed} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    let age = ref(0)
    let handleClick = () => {
      age.value++
    }
    // 1 监听基本类型
    watch(age, (newValue, oldValue) => {
      console.log(oldValue)
      console.log(newValue)
    })

    // 2 监听对象
    let userInfo = reactive({
      name: 'lqz',
      age: 19
    })
    let handleChange = () => {
      userInfo.name = '谢谢谢谢谢寻寻寻寻'
    }
    watch(() => userInfo.name, (newValue, oldValue) => {
      console.log('名字变了：' + userInfo.name)
    })


    // 3 同时监听多个变量变化
     watch([age,], (newValue, oldValue) => {
      console.log('age或msg变化了', newValue, oldValue)
    })

    return {age, handleClick, userInfo, handleChange}
  },
}
</script>

7 生命周期

# vue2 : 8个生命周期钩子
	
# vue3中变成
    beforeDestroy改名为 beforeUnmount
    destroyed改名为 unmounted
    
    
    Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
        beforeCreate===>setup()
        created=======>setup()
        beforeMount ===>onBeforeMount
        mounted=======>onMounted
        beforeUpdate===>onBeforeUpdate
        updated =======>onUpdated
        beforeUnmount ==>onBeforeUnmount
        unmounted =====>onUnmounted

<template>
  <div class="home">
    <h1>生命周期</h1>
    {{ name }}
    <br>
    <button @click="handleClick">点我变名字</button>
  </div>

</template>

<script>

import {
  ref,
  reactive,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
import axios from 'axios'

export default {
  name: 'HomeView',
  setup() {
    //1 这里写的代码，就是 beforeCreate，没有数据[变量没定义]，没挂载
    console.log('beforeCreate')
    // 2 这里写代码，就是created,有数据，变量定义了，没挂载
    let name = ref('lqz')
    axios.get('http://127.0.0.1:8000/film/').then(res => {
      name.value = res.data.msg
    })
    // 3 onMounted
    onMounted(() => {
      console.log('挂载完了')
    })
    // 4 onUpdated
    onUpdated(() => {
      console.log('页面更新')
    })

    // 5 onUnmounted
    onUnmounted(() => {
      console.log('组件销毁')
    })
    let handleClick = () => {
      name.value = 'afdasdfasdfasdf'
    }

    return {name, handleClick}
  },

  //配置项api====》变了最后俩
  // beforeCreate() {
  // },
  // created() {
  // },
  // beforeMount() {
  // },
  // mounted() {
  // },
  // beforeUpdate() {
  // },
  // updated() {
  // },
  // beforeUnmount() {
  // },
  // unmounted() {
  // }

}
</script>

8 toRef

<template>
  <div class="home">
    <h1>toRef函数</h1>
    {{ name }}---{{ age }}---{{ hobby }}---{{ count }}
  </div>

</template>

<script>

import {
  ref,
  toRefs,
  reactive,
} from 'vue'

export default {
  name: 'HomeView',
  setup() {

    let data = reactive({
      name: 'lqz',
      age: 19,
      hobby: '篮球'
    })
    let count = ref(0)
    let xx = {...toRefs(data)}  // {name:lqz,age:19,bobby:篮球}
    console.log(xx)

    // 可以把对象解压

    return {...toRefs(data), count}   // {name:lqz,age:19,bobby:篮球,count:0}
  },


}
</script>

9 setup写法

<template>
  <h1>我是首页</h1>
  <!--  <div>{{ name }}</div>-->
  <!--  <button @click="handleChange">点我变名字</button>-->

  <!--  <button @click="load">点我加载</button>-->
  <!--  <div v-for="film in filmList">-->
  <!--    <p>{{ film.name }}</p>-->

  <!--  </div>-->

  <!--  <HelloWorld msg="lqz is handsome"></HelloWorld>-->


  <!--  <RouterLink to="/about">-->
  <!--    <button>点我跳转到about</button>-->
  <!--  </RouterLink>-->

  <!--  <button @click="handleGo">点我跳转到about</button>-->

<!--  {{ store.count }}-->
<!--  <button @click="handleAdd">点击+1</button>-->


  <hr>
  <el-button type="primary">Primary</el-button>
  <br>
  <el-switch v-model="value1"/>


</template>

<script setup lang="js">
//1  以后这里面写的，就相当于 写在setup函数中,现在不需要返回，在template都能用到
// import {ref,reactive} from 'vue'
// let name = ref('lqz')
// let handleChange = () => {
//   name.value = 'sadfasdfafs'
//   console.log(name)
// }


//2  加载电影数据
// import {ref, reactive} from 'vue'
// import axios from 'axios'
//
// let filmList = reactive([])
//
// //发送ajax
// let load = () => {
//   axios.get('http://127.0.0.1:8000/film/').then(res => {
//     filmList = res.data.results
//     console.log(filmList)
//   })
// }


// 3 注册组件
import HelloWorld from '@/components/HelloWorld.vue'


// 4 路由跳转  setup中没有this了---》想用谁，就是导入谁
// this.$router.push()  // 用不了了
// import {useRouter, useRoute} from 'vue-router'
//
// const router = useRouter()
// const route = useRoute()
//
//
// let handleGo = () => {
//   router.push('/about?name=lqz')
// }


// 5 pinia的使用
// import {useCounterStore} from '@/stores/counter'
// // 可以在组件中的任意位置访问 `store` 变量 ✨
// const store = useCounterStore()
// // console.log(store.count)
// let handleAdd = () => {
//   store.count++
// }


// 6 使用elementui
import {ref} from 'vue'

let value1 = ref(true)

</script>

作业

# 使用setup写法
	elmentui 登录 显示电影
    没登录不允许访问首页--》重定向到登录
无敌开心
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Ref Effect baseHandler reactive Proxy Vue 3
01-04
在 Vue 3 中，引入了 `ref` 和 `reactive` 两个核心 API，它们构建在 `Proxy` 之上，为开发者提供了更直观的响应式声明方式。`ref` 主要用于创建可响应的值，它可以是一个基本类型或者一个对象。当你对 `ref` 创建的...
Vue父组件监听子组件生命周期
10-14
Vue提供了一种机制，允许父组件监听子组件的生命周期钩子，从而实现更加灵活的交互。本文将深入探讨Vue父组件如何监听子组件的生命周期，并通过实例来展示这一功能。 Vue组件的生命周期是由一系列的钩子函数组成的...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
10-18
本文将详细探讨如何在Vue 2.0中监听文本框内容的变化以及如何使用ref属性来直接操作DOM。 ### Vue 2.0中监听文本框内容变化 在Vue中监听文本框内容变化通常使用`v-model`指令来实现。`v-model`在表单`<input>`和`...
Vue的属性、方法、生命周期实例代码详解
10-16
在Vue.js框架中，属性、方法和生命周期是构建组件和应用的关键组成部分。让我们深入理解这些概念，并通过提供的实例代码来详细解释它们。 首先，Vue的属性包括数据（data）、计算属性（computed）和监听属性（watch...
11.动态标签页的一些优化和bug的解决
最新发布
qq_55121347的博客
08-16 202
动态标签页的一些优化和bug的解决
el-checkbox 状态不更新
bao
08-13 281
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
Vue 生命周期详解含demo、面试常问问题案例
qq_34419312的博客
08-16 816
Vue 生命周期详解、面试常问问题案例 含 demo
Vue 3的Computed属性
计算机图形学
08-15 380
Vue 3的组合式API为Computed属性的使用带来了新的变化和可能性。通过computed函数，开发者可以轻松地创建只读或可写的Computed属性，并在组件中高效地处理响应式数据。合理使用Computed属性，可以使代码更加简洁、清晰和高效。
Vue中的路由与多种守卫常见问题及解决方案
zhaochen1127的博客
08-12 1121
Vue Router中的路由守卫主要分为三种类型：全局守卫、路由独享守卫和组件内守卫。全局守卫：作用于整个应用，包括beforeEach和afterEach。路由独享守卫：在路由配置中直接定义，只有进入该路由时才会触发，如。组件内守卫：定义在组件内部，包括和。路由守卫是Vue Router中一个强大的功能，能够帮助开发者在路由跳转前后执行重要的逻辑判断。然而，不当的使用和配置可能会引发一系列问题，如无限循环、守卫逻辑错误、守卫未正确触发以及异步处理不当等。
el-table简洁之道
yan1915766026的博客
08-16 407
el-table简化写法，更加高效、可读性强
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1036
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
Vue2计算属性与Vue3的计算属性对比
qq_40792800的博客
08-12 487
但是这么写其实存在一个优化点，因为 Vue3 现在对于对象的响应式时通过Proxy代理实现的，是针对于对象的，现在可以直接删除或添加属性的同时还能实现响应式，而不用像Vue2一样还需要依赖 set、delete 等api。：允许开发者定义基于响应式数据的动态值。在Vue2 的例子中，我们改变了计算属性，同时响应式数据夜同步发生改变，我们现在在Vue3的语法中同样可以实现，且方法大致上和 Vue2 一致。上面说的是Vue2 和 Vue3 混用，现在我们来看看真正的Vue3的计算属性时怎么使用的。
Element-plus中的el-input无法输入空格和Enter事件无法触发问题
qq_41068362的博客
08-13 260
在el-input外层包了一层el-tooltip导致space和enter失效
Vue + Axious
qq_65186476的博客
08-16 339
Vue + Axious
【Vue3-Typescript】＜script setup lang=“ts“＞ 使用 ref标签 怎么获取 refs子组件呢
weixin_43343144的博客
08-13 265
注意：请确保子组件已经正确挂载，并且通过。暴露了您想要在父组件中访问的属性或方法。
Vue中下载内容为word文档
Ninewu的博客
08-16 172
1.使用 html-docx-js：这是一个将 HTML 转换为 Word 文档的库。2. 利用 Blob 和 FileSaver.js：创建并下载生成的 Word 文档。
TypeError: Cannot read properties of undefined (reading ‘scrollIntoView‘)（已解决）
不起眼小菜菜的博客
08-16 197
注释很详细，直接上代码……
Vue快速入门(五)——组合式API(二)
bjzhang75的博客
08-13 61
深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。// 所以：此处需要借助于 “编译器宏” 函数接收子组件传递的数据。// 所以：此处需要借助于 “编译器宏” 函数接收子组件传递的数据。生命周期函数是可以执行多次的，多次执行时传入的回调会在时机成熟时。的，直接修改嵌套的对象属性不会触发回调执行，// 1. 给子组件，添加属性的方式传值。// 2. 在子组件，通过props接收。// 1. 给子组件，添加属性的方式传值。// 2. 在子组件，通过props接收。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无敌开心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值