快速入门Vue3.0！跟我入门第一天，一起来看看跟vue2的区别

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

最后

如果对您有帮助，希望能给个👍评论收藏三连！

博主为人老实，无偿解答问题哦❤