vue2与vue3.0对比

不包括vue3.2！

1. 获取数据

Vue2：

<script>
export default {
  name: 'App',
  data: {
  	return {
		name: '前端印象',
		age: 22
	}
  },
  mounted() {
  	console.log(this.name)
  	console.log(this.age)
  }  
}
</script>

Vue3：使用ref + return

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
  	const name = ref('前端印象')
  	const age = ref(22)

	console.log(name.value)
	console.log(age.value)
	
    return {name, age}
  }
}
</script>

2. 使用方法

Vue2：

<script>
export default {
  name: 'App',
  methods: {
	show() {
		console.log('show方法被调用')
	}
  },
  mounted() {
  	this.show()
  }  
}
</script>

Vue3：在setup中定义

<script>
import {onMounted} from 'vue'
export default {
  name: 'App',
  setup() {
	function show() {
		console.log('show方法被调用')
	}

	onMounted(() => {
		show()
	})
  }
}
</script>

3. 获取当前组件根元素

Vue2：

<template>
  <div id="app" ref="root">
	<p class="child"></p>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
  	const el = this.$refs.root
  	console.log(el)
  }  
}
</script>

Vue3：使用const root = ref(null)

<template>
  <div id="app" ref="root">
	<p class="child"></p>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'
export default {
  name: 'App',
  setup() {
	const root = ref(null)

	onMounted(() => {
		console.log(root.value)
	})
  }
}
</script>

4. 子组件向父组件通信

Vue2：

<script>
export default {
  name: 'App',
  methods: {
	change() {
		this.$emit('valueChange', 3)
	}
  } 
}
</script>

Vue3：使用context.emit()

<script>
export default {
  name: 'App',
  setup(props, context) {
	function change() {
		context.emit('valueChange', 3)
	}
  }
}
</script>

5. 获取Vuex对象

Vue2：

<script>
export default {
  name: 'App',
  mounted() {
  	console.log(this.$store.state.name)
	this.$store.commit('show')
  } 
}
</script>

Vue3：使用useStore()

<script>
import {onMounted} from 'vue'
import {useStore} from 'vuex'
export default {
  name: 'App',
  setup(props, context) {
  	const store = useStore()
  	
	onMounted(() => {
		console.log(store.name)
		store.commit('show')
	})
  }
}
</script>