快速入门Vue3.0!跟我入门第一天,一起来看看跟vue2的区别❤

简介: 快速入门Vue3.0!跟我入门第一天,一起来看看跟vue2的区别❤

目录

1.setup

2.ref

3.reactive

4.torefs:

5.computed


vue3.0可以有多个根节点

1.setup

函数的用法,可以代替vue2中的data和methos属性,compued属性,都是直接写在setup中就可以了

1.//在script上加setup属性,组件编译过程中的代码运行是在setup函数中,所有es模块导出都认为暴露给上下文的值,并且包含在setup()返回对象中
// 定义setup
// setup是组件使用Composition API的入口函数
// 接收两个参数:props(接受组件props的属性),context(上下文对象,包含一些属性attrs,slots,emit)
// ,这些属性在vue2中需要通过this才能访问
setup(props,context) {
  console.log('1');
  // 在vue3的setup中不能访问vue2的this对象,只能在setup中通过context访问this中常用的几个属性
  // console.log(this.$emit());
}

2.ref

定义一个响应式的数据对象,如果要template中使用数据对象,必须return出去

  • ref:可以定义:字符串,数组,数组对象,对象 -如果访问ref中的属性数据,必须通过属性名,value
1.  // composition API
  // data,methods,computed,watch都是写在setup中
  setup(){//在setup里定义数据一定要返回出去return
  // 直接真么定义不是响应式的数据
    // const count = 0
    // 创建响应式数据对象count ,初始值为0
    const count = ref(0)
    const list = ref(['特仑苏','追梦'])
    // 定义数组对象
    const user = ref([
      {id:101,name:'特仑苏'},
      {id:102,name:'追梦'},
      ])
    // 在这里面写函数不需要写逗号
    let updUser=()=>{
      // 修改数据
      user.value[0].name="Terrance"
    }
    let getCount = ()=>{
      // 如果要访问ref()创建出来响应式数据对象的值,必须通过value属性才可以
      console.log(count.value);
    }
  }

3.reactive

也是用来定义响应式数据对象,类似vue2x中的data()返回的响应式对象


ref 与 reactive 这两种方法定义的都是响应式对象

ref:比较推荐定义基本数据类型

reactive: 推荐定义复杂数据类型时使用

4.torefs:

解构响应式对象的数据


把一个响应式对象转换成普通对象,普通对象的属性都一个ref,和响应式的属性一一对应

5.computed

计算属性 和vue2中的计算属性用法一样,computed写在setup函数中


 setup(){//在setup里定义数据一定要返回出去return
  // reactive也是创建响应式对象的
  // reactive创建的响应式数据对象,类似vue2x中的data()返回的响应式对象
      const data= reactive({
        test:'测试',
        user:{
          name:'木道人',
          sex:'男'
        },
        list:['a','b','c']
        })
        // 访问reactive时可以直接访问不用别的参数
        console.log(data.test);
        // 创建一个响应式对象user
        const user = reactive({
          firsName:'',
          lastName:''
        })
          // 根据user的值,创建一个响应式的计算属性fullName
          // 他会根据依赖自动计算返回一个新的响应式数据(ref)
        const fullName = computed(()=>{
          return user.firsName + '' +user.lastName
        })
        const  getFullName=()=>{
          console.log(fullName.value);
        }
    return{
      // 结构响应式数据对象
      // 用...扩展运算符解构响应式对象数据是不可行的,
      // 因为解构后就变成了普通变量,就没有了响应式的能力
      // ...data
        // toRefs把一个响应式的对象转换成普通对象,对data进行了包装,
        // 再使用...拓展符的方式,成为响应式的解构
      ...toRefs(data),
      ...toRefs(user),
      // 计算属性
      fullName,
      getFullName
    }
  }


博主公_号:前端老实人,期待各位小伙伴加入我们一起学习的队伍哦❤

相关文章
|
2月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
90 6
|
2月前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
25 2
|
2月前
|
JavaScript 前端开发 算法
对比一下Vue2 和 Vue3?—— 8个方面给你答案
本文介绍了 Vue 和 React 的起源、核心思想、表现形式、API 差异、社区差异、升级方向、响应式原理、Diff 算法、事件机制,并进行了总结。Vue 以其渐进式框架设计和简洁性著称,而 React 则强调单向数据流和灵活性。两者均支持组件化开发和虚拟 DOM,适用于不同的开发场景。
27 0
对比一下Vue2 和 Vue3?—— 8个方面给你答案
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
缓存 JavaScript 前端开发
对比一下Vue2和Vue3?
本文首发于微信公众号“前端徐徐”,详细对比了 Vue 2 和 Vue 3 在原理、生命周期、性能、编码方式、API、Diff 算法、打包构建、TS 支持等八个方面的差异,帮助读者全面了解两者的不同之处。
202 0
对比一下Vue2和Vue3?
|
2月前
|
JavaScript API 开发者
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
63 1
|
2月前
|
JavaScript API
|
2月前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
45 1
|
2月前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
79 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
2月前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
187 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)