preface

Project version: Vue3.0.4

Vue3.0.3 added experimental features

  • compiler-sfc: compileScript inline render function mode
  • compiler-sfc: new script setup implementation
  • compiler-sfc: new SFC css varaible injection implementation
  • compiler-sfc: support kebab-case components in <script setup> sfc template
  • runtime-core: explicit expose API

SFC address

  • script setup
  • sfc-style-variables
  • ref-sugar

Initializing the Environment

git clone https://github.com/taosiqi/vue3.0.4-demo.git 
cdVue3.0.4 - demo yarn yarn serveCopy the code

script setup

Adding setup to script is equivalent to writing code directly inside setup() without a return

<template> <! - in case 1 -- > < div class = "example" > < button @ click = "reduce" > - < / button > < div > {{num}} < / div > < button @ click = "add" > + < / button > </div> </template> <script setup> import { ref } from "vue"; OnMounted :{num. Value =100} function reduce(){num. Value -=1} function add(){num. num.value+=1 } </script> <style scoped lang="scss"> .example{ display: flex; height: 25px; line-height: 25px; justify-content: center; button{ width: 50px; height: 25px; } div{ padding: 0 10px; } } </style>Copy the code

Try changing the Home component of Example to script Setup

After importing the components, we don’t have the components, but it works fine

<template>
  <div class="home">
    <example :msg="msg"/>
  </div>
</template>

<script setup>
import example from '@/components/example.vue'
import { ref } from "vue";
let msg=ref('Welcome to Your Vue.js App')
</script>

Copy the code

The use of props

Props needs to use defineProps

<template> <! -- Case 2--> <h1>{{props. MSG}}</h1> </template> <script setup> import {defineProps} from "vue"; const props = defineProps({ msg: { type: String, }, }); </script>Copy the code

Expose a method to the parent component

Use ctx.expose to expose methods and properties for the parent component to call.

< / / parent component template > < div class = "home" > < example / > < example2: MSG = "MSG" / > < example3: ref = "(ref) = > = {example3Ref ref}" / > < / div >  </template> <script setup> import example from '@/components/example.vue' import example2 from '@/components/example2.vue' import example3 from '@/components/example3.vue' import { ref } from "vue"; let msg=ref('Welcome to Your Vue.js App') let example3Ref=ref(null) console.log(example3Ref) </script>Copy the code
// Subcomponent <template> <! - case 3 -- -- > < div class = "example" > < button @ click = "reduce" > - < / button > < div > {{num}} < / div > < button @ click = "add" > + < / button > </div> </template> <script setup> import {ref,useContext} from "vue"; const { expose } = useContext(); let num = ref(0) function reduce() { num.value -= 1 } function add() { num.value += 1 } expose({ reduce, }) </script> <style scoped lang="scss"> .example { display: flex; height: 25px; line-height: 25px; justify-content: center; button { width: 50px; height: 25px; } div { padding: 0 10px; } } </style>Copy the code

If a child component uses expose to expose the Reduce method, the parent component can only access the Reduce method

Ref: syntactic sugar

Using ref: to declare a variable, we can directly access the value of the variable, without adding a value.

<template> <! <div class="example"> <div>{{num}} < button@click ="check" >check</button> </div> </div> </template> <script Import {ref} from "vue"; ref:num=100 function check(){ num=1 } </script> <style scoped lang="scss"> .example { display: flex; height: 50px; width: 50px; justify-content: center; align-items: center; color: red; background-color: black; } </style>Copy the code

CSS V-bind (easier to write than var)

When I try to declare CSS variables using var (var), esLint gives an error (The new proposals). CSS variables can be declared using the new V-bind syntax, which is much cleaner and doesn’t have to declare too many properties in style.

/* eslint-disable */ <template> <! <div class="example"> <div>{{num}} < button@click ="check" >check</button> </div> </div> </template> <script setup> import {ref} from "vue"; ref:num=100 ref:color1='red' ref:color2='green' const colorArr=['red','green','aquamarine','aquam'] function check(){ const index = Math.floor(Math.random() * colorArr.length) const index2 = Math.floor(Math.random() * colorArr.length) color1=colorArr[index] color2=colorArr[index2] } </script> /* eslint-disable */ <style scoped lang="scss"> .example { display: flex; height: 150px; width: 150px; justify-content: center; align-items: center; color: v-bind(color1); background-color:v-bind(color2); } </style>Copy the code

conclusion

Advantages:

  1. The new REF syntax sugar is more convenient.
  2. CSS V-bind write skin function cool do not do not

Disadvantages:

  1. There is a lot of uncertainty about the new syntactic sugar, and its late persistence is a problem
  2. – in version 3.0.4, using var to declare CSS variables will cause ESLint to report an error, ignoring vue file checks will not fix this.
  3. Eslint-plugin-vue does not yet support checking for new syntax, it will be fixed later (you can turn it off first).