0、选项式(Options API)和组合式(Composition API)书写风格

API 风格

选项式 API (Options API)

• vue2的写法

<script>
export default {
	name: 'MyComponent',
	props: ['title'],
	props: {
	  title: String,//字符串
	},
	props: {
	  propA: String,//字符串
	  propB: [String, Number],
	  // 带有默认值的数字
	  propC: {
	    type: Number,
	    default: 100
	  },
	},
	data() {
		return {
			count: 0
		}
	},
	// 生命周期钩子
    beforeCreate() {
      // 实例完全被创建之前调用
      console.log('beforeCreate');
    },
    created() {
      // 实例创建完成后调用
      console.log('created');
    },
    beforeMount() {
      // 挂载开始之前调用
      console.log('beforeMount');
    },
    mounted() {
      // 挂载到实例上之后调用
      console.log('mounted');
    },
    beforeUpdate() {
      // 数据更新时调用
      console.log('beforeUpdate');
    },
    updated() {
      // 组件DOM已经更新
      console.log('updated');
    },
    beforeDestroy() {
      // 实例销毁之前调用
      console.log('beforeDestroy');
    },
    destroyed() {
      // 实例销毁之后调用
      console.log('destroyed');
    },
	// 计算属性
    computed: {
		reversedMessage() {
            return this.message.split('').reverse().join('');
        }
    },
	// 监听器
	watch: {
	    message(newVal, oldVal) {
	        console.log(`message changed from ${oldVal} to ${newVal}`);
	    }
	},
	//方法
	methods: {
		increment() {
			this.count++
		}
	},
}
</script>

组合式 API (Composition API)

• vue2的写法
• 在单文件组件中，组合式 API 通常会与 <\script setup> 搭配使用
• 基础写法

<script setup>
import { toRefs, toRef } from 'vue'

export default {
	props: {
	    title: String
	},
	setup(props,context) {
		const count = ref('1')
		const name = ref('我的名字')
		// 返回值会暴露给模板和其他的选项式 API 钩子  不返回用不了哦
		return {
			count,
			name
		}
	},
	mounted() {
		console.log(this.count) // 1
		console.log(this.name) // 我的名字
	}
}
</script>

• setup语法糖

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

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>