current position:Home>vue3 first experience

vue3 first experience

2022-09-23 08:21:43super_wanan

vue官网已经默认vue3版本了,再不学习vue3就out了~

vue3Build application development

npm init vue@latest

这一指令将会安装并执行 create-vue,And you need to ensure that before using this commandnode升级到16.0版本以上.
创建项目完成后:

cd <your-project-name>
npm install
npm run dev

One can runvue3项目了~vue3提供了两种api风格,选项式和组合式.
An example component in the generated project is to use composition API 和 < script setup > 编写的,rather than optional API.

打开main.ts文件,发现vueThe instance of has some changes,由之前的new关键词实例化,转变为createApp方法的调用形式.

	// vue2.x
	new Vue({
    
	  el: '#app',
	  render: h => h(App)
	})
	
	// vue3.x
	import {
     createApp } from 'vue'
	import App from './App.vue'
	const app = createApp(App)
	app.mount('#app')

并且打开app.vue发现vue3.0的单文件组件中不再强制要求必须有唯一根元素

<template>
  <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

  <div class="wrapper">
    <HelloWorld msg="You did it!" />
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </div>

  <RouterView />
</template>

什么是组合式API

组合式api(Composition API)算是vue3A very valuable one for developersapi更新,Don't pay attention to the specific syntax for now,Have a basic perception of it first

options API开发出来的vue应用如下图所示,It is characterized by easy understanding,Because each option has a fixed writing position,For example, responsive data is writtendata选择中,The operation method is writtenmethodsModerate configuration items,After the application is large,I believe that everyone has encountered the dilemma of going back and forth to find the code
在这里插入图片描述
composition API开发的vue应用如下图所示,Its characteristic is that everything related to a specific function is maintained together,比如功能A相关的响应式数据,操作数据的方法等放到一起,这样不管应用多大,都可以快读定位到某个功能的所有相关代码,维护方便,Set if the function is complicated,代码量大,Logical split processing is also possible
在这里插入图片描述
在这里插入图片描述
需要注意的是:

  1. 选项式api和组合式apiThe two styles coexist 并不是非此即彼
  2. Scenarios that require a large number of logical combinations,可以使用compition API进行增强

例子

需求:Implement two independent functions:1. Controlled by the click of a buttondiv的显示和隐藏
2. 通过点击按钮控制divChanges in font color within

需求图
vue2.x option 版本

<template>
  <div>
    <!-- Function one template -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div v-if="showDiv">One is controlled explicit and hiddendiv</div>
  </div>
  <div>
    <!-- Function two template -->
    <button @click="changeRed">红色</button>
    <button @click="changeYellow">蓝色</button>
    <div :style="`color:${fontColor}`">A controlled font colordiv</div>
  </div>
</template>

<script>
export default {
    
  name: 'App',
  data() {
    
    return {
    
      showDiv: true, // function-data
      fontColor: '' // Function two data
    }
  },
  methods: {
    
    // function-method
    show() {
    
      this.showDiv = true
    },
    hide() {
    
      this.showDiv = false
    },
    // Function two method
    changeRed() {
    
      this.fontColor = 'red'
    },
    changeYellow() {
    
      this.fontColor = 'blue'
    }
  }
}
</script>

vue3.0 composition 版本

<template>
  <div>
    <!-- Function one template -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div v-if="showDivFlag">One is controlled explicit and hiddendiv</div>
  </div>
  <div>
    <!-- Function two template -->
    <button @click="changeRed">红色</button>
    <button @click="changeBlue">蓝色</button>
    <div :style="`color:${fontColor}`">A controlled font colordiv</div>
  </div>
</template>

<script>
import {
     ref } from 'vue'
export default {
    
  name: 'App',
  setup() {
    
    // 功能一
    const showDivFlag = ref(true)
    function show() {
    
      showDivFlag.value = true
    }
    function hide() {
    
      showDivFlag.value = false
    }
    // 功能二

    const fontColor = ref('')
    function changeRed() {
    
      fontColor.value = 'red'
    }
    function changeBlue() {
    
      fontColor.value = 'blue'
    }
    return {
     showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>

composition api版本优化

<script>
import {
     ref } from 'vue'
function useShow() {
    
  const showDivFlag = ref(true)
  function show() {
    
    showDivFlag.value = true
  }
  function hide() {
    
    showDivFlag.value = false
  }
  return {
     showDivFlag, show, hide }
}

function useColor() {
    
  const fontColor = ref('')
  function changeRed() {
    
    fontColor.value = 'red'
  }
  function changeBlue() {
    
    fontColor.value = 'blue'
  }
  return {
     fontColor, changeRed, changeBlue }
}
export default {
    
  name: 'App',
  setup() {
    
    // 功能一
    const {
     showDivFlag, show, hide } = useShow()
    // 功能二
    const {
     fontColor, changeRed, changeBlue } = useColor()
    return {
     showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>

By defining a function function,把两个功能相关的代码各自抽离到一个独立的小函数中,然后通过在setupIn the function, two small function functions are combined,This can be donesetup函数变得清爽,又可以方便维护快速定位功能位置.

copyright notice
author[super_wanan],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/266/202209230818423525.html

Random recommended