Vue3.0 series – “Vue3.0 Learning Manual” the first issue

I. Project construction

Vite is a tool developed by Uttar to replace WebPack. It is implemented by taking advantage of the IMPORT send request load file feature of ES6. Intercept these requests, do some compilation, and save WebPack’s tedious packaging time. And bundle it with the Rollup for production. There is no binding during development. The ES Import syntax in the source code is fed directly to the browser, which parses it through native < Script Module > support to make an HTTP request for each Import. The development server intercepts the request and performs code conversion when necessary. For example, an import to a *.vue file is compiled immediately before being sent back to the browser.

1. Install vite scaffold globally

npm install -g create-vite-app
Copy the code

2. Create the project using scaffolding

create-vite-app projectName
Copy the code

3. Go to the Project folder

cd projectName
Copy the code

4. Install dependencies

npm install
Copy the code

5. Start the VUe3.0 project

npm run dev
Copy the code

Ii. Problems existing in VUE 2.x

2. One of the problems with X is that as business grows, data and logic become fragmented and difficult to maintain.

<template>
  <div>
    <div>
      <input type="text" v-model="obj.id">
      <input type="text" v-model="obj.con">
      <button @click="submit">To hand in</button>
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="cli(index)">
        {{item.id}}-{{item.con}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:"filterBox".data(){
    return {
      list:[
        {
          id:1.con:"a"
        },
        {
          id:2.con:"b"}].obj: {id:"".con:""
      }
      // Code data 1
      // Code data 2
      // ...}},methods: {cli(index){
      this.list = this.list.filter((item,idx) = >idx! ==index);console.log(this.list);
    },
    submit(){
      // const obj = Object.assign({},this.obj);
      this.list.push(this.obj);
      this.obj.id = "";
      this.obj.con = "";
    },
    // Execute code code logic 3
    // ...
  },
  computed: {// Execute code code logic 1
  },
  watch: {// Execute code logic 2}}</script>

<style>

</style>
Copy the code

Three, combination API

ref

<template>
  <div>
    <p>{{count}}</p>
    <button @click="add">add</button>
  </div>
</template>

<script>
import {ref} from "vue"
export default {
  name: 'App'.setup(){
    // Define a variable named count, whose initial value is 0
    // After this change, vue automatically updates the page.
    const count  = ref(0);
	// In the composite API, if you want to define a method, you can define it in the setup function instead of in the methods.
    const add = () = > {
      count.value+=1;
    }
	// A variable/method defined in the composite API must return out if it is to be used outside.
    return {
      count,
      add
    }
  }
}
</script>

Copy the code

Ref can only listen for changes of simple types, not complex types (object/array). It’s reactive, so when we pass a value to the ref function, the ref function automatically converts the ref to reactive.

ref(0) -->  reactive({
value:0
})
Copy the code

In addition, it is important to note that if the data is created by the ref, you do not need to use the.value when using the template. Because Vue will automatically add dot value to us.

So how does vue decide whether to automatically add a.value? Before parsing the data, vUE will automatically determine whether the data is of type REF. If yes, it will automatically add.value. If not, it will not automatically add.value.

How does vue determine if the current data is of type REF? __v_ref for the current data. If this attribute is private and the value is true, then the data is of type REF.

Then we developers have our own API to judge. IsRef (data), which returns true or false.

import {isRef} from 'vue'
Copy the code

reactive

Reactive can listen for changes to complex types such as objects or arrays.

let state = reactive({
	name:"maomin"
});
/ / or
let arr = reactive([1.2.3]);
Copy the code

<template>
  <div>
    <ul>
      <li v-for="(item,index) in state.list" :key="item.id" @click="removeItem(index)">{{item.id}}--{{item.con}}</li>
    </ul>
  </div>
</template>

<script>
import {reactive} from "vue"
export default {
  name: 'App'.setup(){
    const state  = reactive({
      list:[
        {
          id:1.con:"A"
        },
        {
          id:2.con:"B"
        },
        {
          id:3.con:"C"}}]);const removeItem = (index) = > {
      state.list = state.list.filter((item,i) = >i! ==index) }return {
      state,
      removeItem
    }
  }
}
</script>

Copy the code

We can change this and put the data and logic together, thus solving the problem of vue2.x’s data and logic being scattered.

<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in state.list"
        :key="item.id"
        @click="removeItem(index)"
      >
        {{ item.id }}--{{ item.con }}
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App".setup() {
    let {state,removeItem} = userReturn();
    return{ state, removeItem, }; }};function userReturn(params) {
  const state = reactive({
    list: [{id: 1.con: "A"}, {id: 2.con: "B"}, {id: 3.con: "C",}]});const removeItem = (index) = > {
    state.list = state.list.filter((item, i) = >i ! == index); };return {state,removeItem}
}
</script>

Copy the code

We implemented the delete function above, so we are implementing an add function.

<template>
  <div>
    <input type="text" v-model="state2.items.id">
    <input type="text" v-model="state2.items.con">
    <button @click="addItem">add</button>
    <ul>
      <li
        v-for="(item, index) in state.list"
        :key="item.id"
        @click="removeItem(index)"
      >
        {{ item.id }}--{{ item.con }}
      </li>
    </ul>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App".setup() {
    let {state,removeItem} = userRemove();
    let {state2,addItem} = userAdd(state);
    return{ state, removeItem, state2, addItem }; }};/ / add
function userAdd(state) {
   const state2 = reactive({
    items: {id:"".con:""}});const addItem = () = > {
    const items = Object.assign({},state2.items);
    state.list.push(items);
    state2.items.id = "";
    state2.items.con = "";
  };

  return {state,state2,addItem}
}
/ / delete
function userRemove(params) {
  const state = reactive({
    list: [{id: 1.con: "A"}, {id: 2.con: "B"}, {id: 3.con: "C",}]});const removeItem = (index) = > {
    state.list = state.list.filter((item, i) = >i ! == index); };return {state,removeItem}
}
</script>

Copy the code

If it is another object, by default the object is modified and the interface is not updated.

<template>
  <div>
    <p>{{state.time}}</p>
    <button @click="add">Add a day</button>
  </div>
</template>

<script>
import {reactive} from 'vue'
export default {
  name:"Demo4".setup(){
    const state = reactive(
      {
        time:new Date()});function add () {
      state.time.setDate(state.time.getDate()+1);
      console.log(state);
    }
    return {
      state,
      add
    }
  }
}
</script>

<style>

</style>
Copy the code

If you want to update, you can do it by reassigning.

<template>
  <div>
    <p>{{ state.time }}</p>
    <button @click="add">Add a day</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Demo4".setup() {
    const state = reactive({
      time: new Date()});function add() {
      const newTime = new Date(state.time.getTime());
      newTime.setDate(state.time.getDate() + 1);
      state.time = newTime;
      console.log(state);
    }
    return{ state, add, }; }};</script>

<style>
</style>
Copy the code

In the same way, we developers can check if a data is of reactive type. We can use isReactive, return true or false.

import {isReactive} from 'vue'
Copy the code

Fourth, composition API essence

The optionAPI and compositionAPI can be mixed. Its essence is injection.

<template>
  <div>
    <p>Vue2.x</p>
    <button @click="cli1">Click on the</button>
    <p>Vue3.0</p>
    <button @click="cli2">Click on the</button>
  </div>
</template>

<script>
import {ref} from "vue"
export default {
  name:"Demo2".data(){
    return {
      msg:"Vue2.x"}},methods: {cli1(){
      alert(this.msg); }},setup(){
    let txt = ref("Vue3.0"); // Insert into the data function
    function cli2() { // Inject it into the Methods property
      alert(txt.value); 
    }
    return {
      txt,
      cli2
    }
  }
}
</script>

<style>

</style>
Copy the code

Five, setup execution timing and precautions

The setup function, which is done before the BeForecreate hook. So you can’t use data and methods. Also note that setup is synchronous, not asynchronous.

<template>
  <div>
    <button @click="name">Open the</button>
  </div>
</template>

<script>
export default {
  name:"Demo3".data(){
    return {
      msg:"hello"}},setup(){
    function name() {
      console.log(this.msg); // undefined
    }
    return {
      name
    }
  }
}
</script>

<style>

</style>
Copy the code

Continue in the next issue

• Welcome to pay attention to my public number front-end calendar road

• Reply to the keyword e-book, you can get 12 front end popular e-books.

• Reply to the keyword Little Red Book 4th edition, you can get the latest “JavaScript Advanced Programming” (4th edition) ebook.

• After paying attention to the public account, click the menu below to add my wechat, I drew a lot of IT leaders, created a technical exchange, article sharing group, looking forward to your joining.

• Author: Vam’s golden bean road

• Wechat official Account: The road to the front