Vue3.2 使用笔记总结【自学复习使用】

1、起初 Vue3.0 暴露变量必须 return 出来,template中才能使用;
2、Vue3.2 中 只需要在 script 标签上加上 setup 属性,组件在编译的过程中代码运行的上下文是在 setup() 函数中,无需return,template可直接使用。

一、文件结构

<template>
 // Vue2中,template标签中只能有一个根元素,在Vue3中没有此限制
</template>
<script setup>
</script>
<style lang="scss" scoped>
  // 支持CSS变量注入v-bind(color)
</style>

二、data

<script setup>
import { reactive, ref, toRefs} from 'vue';

// ref声明响应式数据,用于声明基本数据类型
const name = ref('Tom')
// 修改
name.value = 'Herry';

// reactive声明响应式数据,用于声明引用数据类型
const state = reactive({
	name: 'Herry',
	sex: '男'
})
// 修改
state.name = 'Tom'

 // 使用toRefs解构
  const {name, sex} = toRefs(state)
  // template可直接使用{{name}}、{{sex}}
</script>

三、method

<template>
  // 调用方法
  <button @click='changeName'>按钮</button>  
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({
    name: 'Jery'
  })

  // 声明method方法
  const changeName = () => {
    state.name = 'Tom'
  }  
</script>

四、computed

<script setup>
import {computed, ref} from 'vue';

const count = ref(1);

// 通过computed获得doubleCount
const doubleCount = computed(()=> {
	return count.value * 2;
})
</script>

五、watch

<script setup>
import {watch, reactive} from 'vue';

const state = reactive({
	count: 1
});

const changCount = () => {
	state.count = state.count * 2;
}

watch(
	() => state.count,
	(newVal, oldVal) => {
		console.log(state.count)
      	console.log(`watch监听变化前的数据:${oldVal}`)
      	console.log(`watch监听变化后的数据:${newVal}`)
	},
	{
      immediate: true, // 立即执行
      deep: true // 深度监听
    }
)
</script>

六、 props父传子

6.1 子组件

<template>
   <span>{{props.name}}</span>
  // 可省略【props.】
  <span>{{name}}</span>
</template>
<script setup>
  // import { defineProps } from 'vue'
  // defineProps在
                    
                    

你可能感兴趣的:(vue,vue.js,typescript,javascript)