Learning Vue3.

The need for

  • Vue3 performance significantly improved (because proxy proxy does not require recursive hijacking)
  • Vue3 supports Tree Shaking and can be compiled on demand, resulting in smaller files than Vue2
  • More Typescript support for larger projects
  • More advanced features such as teleport, Suspense, etc
  • Code polymerization

Using Vite

Create application directive:

 npm init vite-app xxx
Copy the code

It’s essentially execution

 npx create-vite-app xxx
Copy the code

However, the latest vite creation directive is :(preferably with the following new creation method)

 npm init vite xxx
Copy the code

NPX means temporarily downloading create-viet-app package to help us create the project and then deleting it automatically

NPM requires that the project name should not have a large hump, instead use –

VS Code plug-in

  • Volar: Vue3 syntax support
  • Vue.js AutoImport: References components
  • Vue3 Snippets: Vue3 Snippets
  • Prettier-code formatter: Formatting Code
  • ESLint: Code quality checks
  • EditorConfig for VS Code: Overrides the editor encoding style configuration

The entry functionsetup

  • The returned object is mounted to the Vue instance object, so it can be used in the template

API

Computed properties

Function: Generate another state based on the existing state

Watch to monitor

A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

The listening resource must be a getter/effect function (getters are used for primitive types), a REF, a Reactive object (a Proxy object is enough), or an array of these types combined.

  • The getter function

    const num = ref(1); // Getter form watch(() => num. Value, (newValue, oldValue) => {console.log(newValue, oldValue); });Copy the code

  • ref

    const num = ref(1); Watch (num, (newValue, oldValue) => {console.log(newValue, oldValue); });Copy the code

  • Reactive object

    const person = reactive({ name: "frank" }); Watch (person, (newValue, oldValue) => {console.log(newValue, oldValue); });Copy the code

  • This is an array

    const man = ref({ age: 22 }); const person = reactive({ name: "frank" }); Watch ([() => man.value.age, person], (newValue, oldValue) => {console.log(newValue, oldValue); });Copy the code

watchEffect

Execute the passed function immediately, trace the dependency responsively, and re-run the function when its dependency changes

 const count = ref(0)
 ​
 watchEffect(() => console.log(count.value))
Copy the code

ToRef function

Simplify the data hierarchy by converting an attribute inside the original reactive data to a new REF for direct use

Note:
  • The first argument toRef takes is an object that ref of type dereference requires.value
setup(props) { const man = ref({ age: 22 }); const person = reactive({ name: "frank" }); Value: toRef(man.value, "age"), reactive: toRef(man.value, "age"); toRef(person, "name"), }; },Copy the code

ToRefs function

Batch data conversion, which converts each attribute in an object to a REF, can be used to directly deconstruct the assignment

     const man = ref({ age: 22 });
     const person = reactive({ name: "frank", gender: 0 });
 ​
     const { age } = toRefs(man.value);
     const { gender, name } = toRefs(person);
Copy the code

Get props

Note:

  • Setup (props) must be declared in the props property to get the props property

  • Do not directly deconstruct the props in setup because it will be unresponsive. Instead, use toRefs to deconstruct the props

    props: ["msg"], setup(props) { const { msg1 } = props; const { msg } = toRefs(props); / / not OK to watch the (() = > msg1, () = > {the console. The log (" direct deconstruction "); }); // OK watch(props, () => { console.log("props"); }); // OK watch( () => props.msg, () => { console.log("props.msg"); }); // OK watch(msg, () => { console.log("msg"); }); }};Copy the code

    \