Vue3基础语法

一、Vue3基础语法

1.定义状态

我们知道vue2定义状态是写到data里面的。在vue3中有很大的改变。

1.ref

ref是用来定义简单数据类型的。
代码如下（示例）：

import {ref} from "vue"
export default {
  setup(){
  let msg = ref(111)//Number
  let msg1 = ref("str")//String
  let msg2 = ref(true)//bool
  }
}

另外,ref有个特例：

import {ref} from "vue"
export default {
  setup(){
  let arr = ref(["a"])//Array
//如果我们要对这个值进行修改可以这样
arr.value[0]="bbb"
  }
}

---

2.reactive

reactive是定义复杂类型的。

import {reactive} from "vue"
export default {
  setup(){
  let obj = reactive({
  a:1
  })//Object
  }
}

---

2.methods

vue2的方法都是定义到methods中，但是在vue3中可以直接定义在seuup函数中。

export default {
  setup(){
  let obj = reactive({
  a:1
  })
  const btn = () => {
  console.log("111")
}
  }
}

---

3.toRefs

toRfes是用来对对象解构的

import { reactive , toRefs}
export default {
  setup(){
  let obj = reactive({
  a:1
  })
  let {a} = toRefs(obj)
  const btn = () => {
  console.log("111")
}
  }
}

这样就可以直接在页面使用a，而不用obj.a了

---

4.computed

计算属性

import { computed } from "vue"
export default {
  setup(){
  let obj = reactive({
  a:1
  })
let {a} = toRefs(obj)
let change = computed(()=>{
	return a.value+1
})
}
  }
}

---

4.watch监听

import { computed , reactive ,  watch , ref} from "vue"
export default {
  setup(){
   let nmsg = ref(1)
   let str = ref("1111")
   let obj = reactive({
      a:3,
      arr:['111',"222"]
    })
let {a} = toRefs(obj)
	// 监听一个数据
     watch(nmsg,(newVal,oldVal)=>{
         console.log(newVal,oldVal);
     })
    // 监听多个数据
     watch([nmsg,str],(newVal,oldVal)=>{
       console.log(newVal,oldVal);
     },{
       immediate:true
     })
    // 监听对象
    watch(()=>obj.a,(newVal,oldVal)=>{
      console.log(newVal,oldVal);
    })
    watch(()=>obj.arr,(newVal,oldVal)=>{
      console.log(newVal,oldVal);
    })
    watch([nmsg,str,()=>obj.a],(newVal,oldVal)=>{
      console.log(newVal,oldVal);
    })
})
}
  }
}

---

总结

vue3对于vue2可以说是换汤不换药，只是语法发生了改变。