【Vue3】Vue3核心内容(上)

这篇具有很好参考价值的文章主要介绍了【Vue3】Vue3核心内容(上)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🎀个人主页:努力学习前端知识的小羊
感谢你们的支持:收藏🎄 点赞🍬 加关注🪐

常用的Composition API

setup函数

1.组件中所用的:数据,方法等等,均要配置在setup中
2.setup函数的俩种返回值:
(1)若返回一个对象,则对象中的属性,方法,在模板中均可以直接使用
(2)若返回一个渲染函数:则可以自定义渲染内容

注意点:
1.尽量不要与vue2的配置使用

  • vue2配置(data,methods,computed …)中可以访问到setup中的属性、方法
  • 但在setup中不能访问到vue2配置(data,methods,computed…)
  • 如果有重名,setup优先

2.setup不能是一个async函数,因为返回值不再是return的对象,而不是promise,模板看不到return对象中的属性(后期也可以返回一个Promise函数,但需要Suspense和异步组件的配合)

ref函数

  • 作用:定义一个响应式的数据
  • 语法:const xxx = ref(initvalue)
    • 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
    • JS中操作数据:xxx.value
    • 模板中读取数据:不需要 .value,直接:
      {{xxx}}

备注:

  • 接受的数据可以是:基本类型、也可以是对象类型
  • 基本类型的数据:响应式依然是靠object.defineProperty()的get和set完成
  • 对象类型的数据:内部’求助’了Vue3.0的一个新函数——reactive函数

reactive函数

  • 作用:定义一个对象类型的响应式数据(基本类型不能使用,基本类型使用ref函数)
  • 语法:const 代理对象 = reactive (源对象)接受一个对象(或数组),返回一个代理对象(proxy的实例对象,简称proxy对象)
  • reactive定义的响应式数据是深层次
  • 内部基于ES6的proxy实现,通过代理对象操作源对象内部数据进行操作

vue3中的响应式原理

vue2的响应式

  • 实现原理:

    • 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

    • 数组类型:通过诚信更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包装)

      Object.defineProperty(data,'count',{
      	get(){},
      	set(){}
      })
      
  • 存在问题:

    • 新增属性、删除属性,界面不会更新
    • 直接通过下表修改数组,界面不会自动更新

Vue3的响应式

  • 实现原理

    • 通过Proxy(代理):拦截对象中任意属性的变化,包括:属性的读写、添加、删除等
    • 通过Reflect(反射):对源对象的属性进行操作
    const p = new Proxy(person,{
                // 有人读取p的某个属性时调用
                get(target,propName){
                    console.log(`有人读取了p身上的${propName}属性`,target,propName);
                    return Reflect.get(target,propName)
                },
                // 有人修改p的某个属性、或给p追加某个属性时调用
                set(target,propName,value){
                    console.log(`有人修改了p身上的${propName}属性,我要去更新页面`);
                    return Reflect.set(target,propName,value)
                },
                // 有人删除p的某个属性时调用
                deleteProperty(target,propName){
                    console.log(`有人删除了p身上的${propName}属性,我要去更新页面`);
                    
                    return Reflect.deleteProperty(target,propName)
                }
            })
    

reactive对比Ref

  • 从定义角度对比:
    • ref用来定义:基本类型数据
    • reactive用来定义:对象(或数组)类型数据
    • ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象
  • 从原理角度:
    • ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。
    • reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据。
  • 从使用角度:
    • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value。
    • reactive定义的数据:操作数据与读取数据:均不需要.value。

setup的注意点

  • setup执行的时机
  • beforeCreate之前执行一次,this值是undefined,
  • setup的参数:
  • props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
  • context: 上下文对象
    • attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
    • slots:收到的插槽内容,相当于this.$slots
    • emit:分发自定义事件的函数,相当于this.$emit

计算属性与监视

computed函数

  • 与vue2.x中computed配置功能一致

  • 写法:

    import { reactive,computed } from "vue";
    
    setup() {
            let person = reactive({
                firstName:"张",
                lastName:"三"
            })
            // 计算属性--简写(没有考虑计算属性被修改的情况)
             person.fullName = computed(()=>{
                 return person.firstName + '-' + person.lastName
             })
    
            // 计算属性--完整写法(考虑读和写)
            person.fullName = computed({
                get(){
                    return person.firstName + '-' + person.lastName
                },
                set(value){
                    const nameArr= value.split('-')
                    person.firstName = nameArr[0]
                    person.lastName = nameArr[1]
                }
            })
    

watch函数

两个注意点

  • 监视reactive定义的响应式对象时:oldValue无法正确获取,强制开启deep(深度监视)
  • 监视reactive定义的响应式数据中某个对象时:deep配置有效
    setup(){
        let sum = ref(0)
        let msg = ref('你好啊')
        let person = reactive({
            name:"张三",
            age:"18",
            Job:{
                j1:{
                    salary:20
                }
            }
        })

        //情况一:监视ref所定义的响应式数据
      /*   watch(sum,(newValue,oldValue)=>{
            console.log('sum变了',newValue,oldValue);
        },{immediate:true}) */
        
        // 情况二:监视ref定义的多个响应式数据
       /*  watch([sum,msg],(newValue,oldValue)=>{
            console.log('msg变了',newValue,oldValue);
        },{immediate:true}) */

        // 情况三:监视reactive定义的一个响应式对象,
        // 注意:1.此处无法正确的获取oldValue
        //       2.强制开启了深度监视(deep配置无效)
        /* watch(person,(newValue,oldValue)=>{
            console.log('person变化了',newValue,oldValue);
        },{deep:false}) */
        // 情况四:监视reactive定义的一个响应式数据的某个属性

        /* watch(()=>person.age,(newValue,oldValue)=>{
            console.log('perosn的age变了',newValue,oldValue);
        }) */

        // 情况五:监视reactiva定义的一个响应式数据的某些对象
      /*   watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log("person的name或者age变了",newValue,oldValue);
        }) */


        // 特殊情况
        /* watch(()=>person.Job,(newValue,oldValue)=>{
            console.log("person的job变了",newValue,oldValue);
        },{deep:true})
        //由于监视的是reactive所定义的对象中的某个属性,所以deep配置有效 */

watchEffect函数

  • watch:既要指明监视的属性,也要指明监视的回调
  • watchEffect:不用指明监视的属性,监视的回调中用到那个属性,那就监视那个属性
  • watchEffect有点像computed:
    • computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值
    • watchEffect更注重的是过程(回调函数的函数体),所以不同写返回值
//watchEffect所指定的回调中的数据只要发生变化,则直接重新执行回调
watchEffect(()=>{
    const x1 = sum.value
    const sa = person.Job.j1.salary
    console.log('watchEffect执行了',x1,sa);
 })  //监视sum 和person.Job.j1.salary的数值

生命周期

【Vue3】Vue3核心内容(上),Vue,javascript,开发语言,vue

  • vue3的生命周期钩子与vue2一样,只是有两个名字发生改变
  • beforeDestory------> beforeUnmounted
  • destoryed -------> unmounted
  • vue3也提供了Composition API形式的生命周期钩子,对应关系如下:
  • beforeCreated ===> setup()
  • created ===> setup()
  • beforeMount ===> onBeforeMount
  • mounted ===> onMounted
  • beforeUpdate ===> onBeforeUpdate
  • update ===> onUpdated
  • beforeUnmount ===> onBeforeUnmount
  • unmounted ====> onUnmounted

自定义hook函数

  • 自定义hook函数——本质是一个函数,把setup函数中使用的组件化API进行了封装

优势:复用代码,让setup中的逻辑更清晰易懂文章来源地址https://www.toymoban.com/news/detail-601051.html

toRef

  • 作用:创建一个ref对象,其value值指向另一个对象中的某个属性
  • 语法:const name = toRef(person,'name')
  • 应用:要将响应式对象中的某个属性单独提供给外部使用
  • 扩展:toReftoRefs功能一致,但可以批量创建多个ref对象,语法:toRefs(person)

到了这里,关于【Vue3】Vue3核心内容(上)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2和Vue3响应式原理实现的核心

    Vue.js 是一个开源的渐进式 JavaScript 前端框架,主要用于构建用户界面和单页应用程序(SPA)。Vue.js 可以轻松地与其他库或现有项目集成使用,并被认为是开发响应式数据驱动的现代 Web 应用的一种有效方式。 Vue.js 的核心特点: 响应式数据绑定:Vue.js 可以通过对数据进行双

    2024年02月08日
    浏览(47)
  • VUE3相比VUE2升级了哪些内容

    目录 一、Vue 3 、Vue 2 对比及提升项 二、  Vue 3 创建app.vue示例  三、Vue3 的setup、Vue2 的 data对比 一、Vue 3 、Vue 2 对比及提升项 性能提升:Vue 3 做了大量的优化工作,提升了运行时的性能。例如,在模板编译时进行的静态分析和优化,以及使用了更高效的响应式系统,使得数据

    2024年01月22日
    浏览(51)
  • Vue | (一)Vue核心(上) | 尚硅谷Vue2.0+Vue3.0全套教程

    学习链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通,本文对应p1-p25,博客参考尚硅谷公开笔记,补充记录实操。 英文官网 中文官网 关于官网(与视频p3已略有出入):文档指南,API查字典,互动指南,示例… Vue开发者工具安装 vscode插件安装,提效 想让Vue工作,就必

    2024年02月20日
    浏览(52)
  • Vue | (一)Vue核心(下) | 尚硅谷Vue2.0+Vue3.0全套教程

    学习链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通,本文对应p26-p52,博客参考尚硅谷公开笔记,补充记录实操。 在应用界面中, 某个(些)元素的样式是变化的。 class/style 绑定就是专门用来实现动态样式效果的技术。 class样式 写法: class=\\\"xxx\\\" ,xxx可以是字符串、对象、数

    2024年02月19日
    浏览(50)
  • Vue2向Vue3过度Vuex核心概念mutations

    1.定义mutations 2.格式说明 mutations是一个对象,对象中存放修改state的方法 3.组件中提交 mutations 4.练习 1.在mutations中定义个点击按钮进行 +5 的方法 2.在mutations中定义个点击按钮进行 改变title 的方法 3.在组件中调用mutations修改state中的值 5.总结 通过mutations修改state的步骤 1.定义

    2024年02月11日
    浏览(45)
  • Vue3组件通信相关内容整理

    适用于:  父向子传递参数、方法, 子触发父传递的方法 props方式组件通信和vue2中的props传参类似,只是使用方式和接收方式有一些区别。 注意点: 通过props方式传递的参数为 只读属性,不可修改 父组件 子组件  组件A :绑定事件-接收数据  组件B:触发事件-传递数据 这

    2024年01月25日
    浏览(47)
  • [GN] Vue3.2 快速上手 ---- 核心语法2

    用在普通 DOM 标签上,获取的是 DOM 节点。 用在组件标签上,获取的是组件实例对象。 用在普通 DOM 标签上: 用在组件标签上: 父组件App使用子组件Person Person组件标签上使用ref 可以获取组件实例 但需要子组件代码中 使用defineExpose暴露内容 App.vue是父组件,Person是子组件 父

    2024年01月21日
    浏览(60)
  • Vue3 Radio单选切换展示不同内容

    环境:vue3+ts+vite+element plus 技巧:v-if,v-show的使用 实现功能:点击单选框展示不同的输入框 效果实现前的代码: 1.默认选项型号是选中的,型号输入框也是展示的,那么颜色输入框是需要隐藏, 定义isShow, 此时,isShow是true,! isShow就是false了,显示如下 2.获取单选框选择的

    2024年02月15日
    浏览(37)
  • Vue3学习(二十三)- 保存文档内容正常显示

    情人节已经接近尾声了,虽然跟我没什么关系,但是我还是很渴望,能遇到一个良人相伴一生。 现在时间: 内心异常平静,相对吵闹我更喜欢安静的晚上,没人打扰, enjoy 自己独处的时间! 1、任务拆解 读取已保存内容 将读取内容在富文本里显示 2、读取已保存内容 这个很

    2024年03月10日
    浏览(35)
  • vue3 表单搜索内容回显到地址栏

    地址栏输入内容回显到form表单,同理表单输入内容也要回显到地址栏中

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包