vue3 setup 简单使用

setup语法糖插件

相当于自动引入，省去 import

npm i -D unplugin-auto-import

// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import {resolve} from 'path';
export default defineConfig({
  plugins: [
    AutoImport({ 
		imports: ['vue','vue-router'] // 解决每次 import { ref , reactive ...} from 'vue' 问题
	}),
	resolve: {
      alias: {
        '@': resolve(__dirname,'./src') // @/ ==> src/
      }
    },
  ],
})

基本使用

<template>
	<div> {{str}} </div>
</template>
<script setup>
	let str = ref('1')
</script>

响应式数据

ref 使用时需要 : x.value
reactive 使用时不需要像ref一样,不需要 .value
reactive 只能写对象或数组

<template>
  <div>
    {{ num }}
  </div>
  <button @click="btnNum">按钮</button>
  <div>
    {{ arr }}
  </div>
  <button @click="changes">修改</button>
</template>
<script setup>
import {ref , reactive} from 'vue';

let num = ref(0)
let arr = reactive([
  'a','b','c'
])
const btnNum = ()=>{
  num.value ++
}

const changes = ()=>{
  arr[2] = 'bb'
}
</script>

toRef 与 toRefs

• toRef: 复制 reactive 里的单个属性并转成 ref
• toRefs: 复制 reactive 里的所有属性并转成 ref

toRef : 基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
使用方法: toRef(响应式对象, 属性)

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')
// 更改 fooRef 会更新 源属性(state)
fooRef.value++
console.log(state.foo) // 2

// 更改 源属性 也会更新 fooRef
state.foo++
console.log(fooRef.value) // 3

toRefs: 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
使用方法: toRefs(响应式对象)

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

// 这个 stateAsRefs 和 源属性 已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3
// toRefs适用于解构数据
// let {foo , bar} = toRefs(state)

引用组件 引入后可以直接使用,不需要注册

<template>
  <div>
    <HelloWorld></HelloWorld>
  </div>
</template>
<script setup>
	import HelloWorld from '@/components/HelloWorld.vue';
</script>

组件 : 父传子

<template>
  <div>
  	<div>这是父页面</div>
    <HelloWorld :msg='msg'></HelloWorld>
  </div>
</template>
<script setup>
	import HelloWorld from '@/components/HelloWorld.vue';
	let msg = ref('父传子')
</script>

<template>
  <h3>这是子页面</h3>
  <div>这是父页面传来的值:{{ msg }}</div>
</template>
<script setup>
  defineProps({
  	msg: String,
  })
</script>

组件 : 子传父

<template>
  <div>
  	<h3>这是父页面</h3>
	<HelloWorld  @cs="froms"></HelloWorld>
	<div>这是子页面传来的值:{{ arrs }}</div>
  </div>
</template>
<script setup>
	import HelloWorld from '@/components/HelloWorld.vue';
	let arrs = ref([])
	const froms = (n)=>{
	  arrs.value = n
	}
</script>

<template>
  <h3>这是子页面</h3>
  <div>这是子页面传给父页面的值:{{ arrs }}
     <button @click="clickArrs">点击传输</button> 
  </div>
</template>
<script setup>
  let arrs = reactive(['a','b','c'])
  let emits = defineEmits()

  let clickArrs = ()=>{
    emits('cs',arrs)
  }
</script>

父子组件双向绑定

<template>
  <h1>父页面:{{ nums }}</h1>
  <HelloWorld v-model:num="nums"></HelloWorld>
</template>
<script setup>
  import HelloWorld from '@/components/HelloWorld.vue';
  let nums = ref(10)
 </script>

<template>
  <div>
    <h3>这是子页面</h3>
    <div>{{ num }}</div>
    <button @click="btn">点击+1</button>
  </div>
</template>
<script setup>
  const props = defineProps({
    num:{
      type: Number
    }
  })
  const emits = defineEmits(['update:num'])
  let a = 10
  const btn = ()=>{
    a+=1
    emits('update:num',a)
  }
</script>

mitt 事务总线(全局通信)

// 安装
npm install --save mitt

// 使用时 在当前页面引入
import mitt from 'mitt'
const emitter = mitt()
// A.vue  传
emitter.emit('自定义名称',值)
// B.vue  接
emitter.on('自定义名称',(v)=>{
  console.log(v)
}

provide 与 lnject 依赖注入

provide('自定义名称',值)  // 向子组件及以下传值

const aa = lnject('自定义名称')  // 子组件及以下接收

computed 计算属性

<template>
  <div>
    str:{{ str }}
  </div>
  <div>
    changeStr:{{ changeStr }}
  </div>
  <input  v-model="changeStrs">
</template>
<script setup>
	let str = ref('字符串')
	let changeStr = computed(()=>{
	  return '*****' + str.value + '*****'
	})
	let changeStrs = computed({
	  get(){
	    return str.value
	  },
	  set(val){
	    str.value = val
	  }
	})
</script>

watch 监听属性

<template>
  <input type="text" name="" id="" v-model="strs">
  <input type="text" name="" id="" v-model="nums">
</template>
<script setup>
	let strs = ref('字符串')
	let nums = ref(99)
	// 监听某一个值
	// watch(strs , (news,olds)=>{
	  // console.log(news,olds);
	// })
	// 监听多个值
	// watch([strs,nums],(news,olds)=>{
	//  console.log(news,olds);
	// },{
	//  immediate:true // 初始化监听
	// })

	let objs = reactive({
	  a:1,b:2,c:{x:0}
	})
	// 监听对象
	// watch(()=>objs,(news,olds)=>{
	//  console.log(news,olds);
	// },{
	//  immediate:true, // 初始化监听
	// })
	// 监听对象某一个值,并深度监听
	watch(()=>objs.c,(news,olds)=>{
	  console.log(news,olds);
	},{
	  immediate:true, // 初始化监听
	  deep:true  // 深度监听
	})
</script>

生命周期的使用

<script setup>
	onMounted(()=>{})
	onUnmounted(()=>{})
</script>