Vue3 快速上手

1. 将vue2中的data、methods等全部用setup实现,然后将所有方法写完后 return{ } 返回

2. 在setup中用ref创建响应式数据（定义变量，相当于vue2里面的data）

          reactive和ref   都是用作定义基本变量的
          ref 定义简单的，reactive一般定义数组和对象
          ref 有.value属性，reactive没有

         例如：let name=ref(“张三”)-----vue3定义变量方法

//vue3
setUp(){
    let name=res(“张三”)  //定义后需返回
    return{ //所有在setup中创建的响应式数据或函数都需要返回
        name
    }
}
//相当于vue2中的：
data(){
    return{
        name:”张三”
    }
}

3、reactive数据绑定(相当与vue2里面的创建一个对象)

//创建数据：
setUp(){
    const data=reactive({
        inputValue:””, //用的时候就是data.inputValue
        todoList:[ ]
    })
    return {
        ...toRefs(data)  //**对于reactive创建的对象需要用toRefs来解构
    }
}

//相当于vue2中的
data(){
    return {
        dataList:{
            inputValue:””,
            todoList:[ ]
        }
    }
}

 4、vue-router

<script>
import { useRouter} from "vue-router"
const router=useRouter()
</script>

const route=useRoute() //类似于this.$route 局部，query、param都可以使用

const router=useRouter()//类似于this.$router 全局，push、replace都可以使用

5、**如果setup在< script setup >这样展示，则不需要再写return返回

6、mounted在vue3中用onMounted(()=>{})的方法实现

onMounted(()=>{
    console.log("111")
})

7、vue3中使用$refs

在vue2中，如果想直接引用页面中的对象，是这样子的：

<template>
<div><input type="text" ref="txt1" value="hello" /></div>
</template>

<script>
	export default {
		methods:{
			test(){
				console.log(this.$refs.txt1.value);
			},
		}
	}
</script>

但在vue3中，没有这种了。这破东西，变来变去，极为无聊，徒增学习成本。

在vue3中，没有$refs这个对象。原先的$emit变成了context.emit，但不会有context.refs这种东西。要直接使用页面对象，是这样子的：

<template>
<div><input type="text" ref="txt1" value="hello" /></div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
  	const txt1 = ref(null);

	const test = () => {
		console.log(txt1.value.value);
	}
	
	return {
		txt1,//一定不要忘记在return中返回给外部
		test
	}
  }
});
</script>

8、组件通信

Props方式

父组件的template中

<demo :list="list"></demo>

子组件中

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
//用的时候 props.list

})
</script>

emit方式

父组件中

<demo @candel="candel"></demo>

子组件中

<script setup>
import { defineEmits } from 'vue'
const emits=defineEmits(["candel"])

function candel(){
    emits('candel',1)
}
</script>

9、未完待续