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

x33g5p2x  于9个月前 转载在 Vue.js  
字(1.8k)|赞(0)|评价(0)|浏览(92)

vue3.0可以有多个根节点

1.setup

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

//在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
// 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
    }
  }

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

相关文章