Vue3.0 && Vue3.0 первый опыт 1

Vue.js
Vue3.0 && Vue3.0 первый опыт 1

предисловие

Коллега спросил меня на днях
Коллега: Вы изучили Vue3.0?
Я::3.0?Что я у него сейчас узнаю, Ю Да сказал, что 2.7 будет обновляться недавно, и я точно забуду, когда сейчас узнаю.
Коллега: Vue3.0 и React немного похожи.
тогда:

напоминать

Это первая глава первого знакомства с Vue3.0. Сколько глав я могу закончить писать Vue3.0? Это все еще загадка, может быть, одна глава, может быть, две главы... Давайте вместе с нетерпением ждать этого!

изменения vue2.x -> vue3.0

Vue3.0 может полностью поддерживать Vue2.0!!!!, вам не нужно менять код Vue после обновления, но подключаемый модуль, на который вы ссылаетесь... , зависит от удачи.

Прежде чем говорить об изменениях, давайте посмотрим, как vue3.0 создает проект.

Первый способ: вите

npm init vite-app 项目名
cd 项目名
npm run dev

Достоинства: почти готово (не нужно компилировать с помощью webpack)
Недостатки: нестабильная, приходится ставить vue-router, vuex самому, (стук по ключу, vue-router, vuex все используют 4.0, легко ошибиться при установке, эненен, ошибка должно быть проблема моего компа, это к вите отношения не имеет....Нестабильность - это тоже личное ощущение, вы можете попробовать, vite все равно должен быть очень прост в использовании, иначе You Da не отправил бы 6 Weibo, чтобы доказать это.

Второй метод

npm install -g @vue/cli
vue create 项目名
cd 项目名
vue add vue-next //重点 执行这行,会把2.0代码改为3.0的, vue-router, vuex会变成4.0的
npm run serve

Не буду говорить о достоинствах и недостатках этого, ведь каждый ветеран!

изменить один mian.js

Изменено в mian.js Дополнительные методы createApp

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './App.scss'

const app = createApp(App)
app.use(router).use(store).mount('#app');

Поскольку здесь используется import { createApp } from 'vue'; вместо import Vue from 'vue', все пакеты, использующие некоторые фреймворки пользовательского интерфейса и сторонние, будут сообщать о следующих ошибках.Когда вы сталкиваетесь с этой ошибкой, это в основном означает, что используемый вами плагин не поддерживает Vue3.0.

Вариант два Vue-router, Vuex

Vue-router, Vuex имеет небольшое изменение, я расскажу об этом позже во второй главе, или вы также можете посмотреть мой исходный код, вы все большие коровы, вы определенно сразу увидите разницу.

Вариант третий раздел шаблона шаблона

В vue2.0 в шаблоне шаблона может быть только один корневой тег, а в версии 3.0 можно использовать несколько корневых тегов.

Посмотрите здесь, тег шаблона имеет два равных, которые дадут ошибку в 2.0

изменить четыре Composition API

В vue2.0 мы называем часть js в файле .vue API-интерфейсом функций, а в версии 3.0 он становится API-интерфейсом композиции. Вот самое большое изменение, посмотрите на картинку ниже(Ключевой момент: import { setup, watch, reactive, toRefs, onMounted } из "vue")

Посмотрите, что вы думаете здесь. en, мы еще не начали, дело в том, что новые функции Vue3.0 уже на подходе.

Composition API что

функция настройки

Функция настройки - это новый компонент Vue - это API входной композиции
<template>
</template>
<script>
import { setup } from 'vue'
export default {
   setup(props, context) {
       //这里的props大家应该知道是啥吧，父组件传的值
       // context是什么？
       //在setup()里我们不能用this
       //所以vue2.0里的 this.$emit, this.$psrent, this.$refs在这里都不能用了。
       //context就是对这些参数的集合
       //context.attrs
       //context.slots
       //context.parent 相当于2.0里 this.$psrent
       //context.root 相当于2.0里 this
       //context.emit 相当于2.0里 this.$emit
       //context.refs 相当于2.0里 this.$refs
       ...
   }
}
</script>
<style>
</style>

декларация данных

В vue2.0 данные объявляются в data(), а в 3.0 data() также отменяется, а ссылаются на Reactive(), ref()

ref() Используется при объявлении одного базового типа данных

Примечание. Определенную переменную функция должна вернуть
 <template>
  <div>{{count}}</div>
</template>
<script>
 import { setup， ref } from 'vue'
 export default {
    setup(props, context) {
        let count = ref(0)
        console.log(count.value) //0 ，  内部获取时需要用.value来获取
        console.log(isRef(count)) //true   //isRef() 用来判断是不是ref对象
     return {
         count  // ref返回的是一个响应式的对象
     }
    }
 }
</script>
<style>
</style>
Reactive() Используется при объявлении одного объекта
<template>
 <div>{{data1}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
   setup(props, context) {
        const obj = reacttive({
        data1: '123',
        data2: {}
    })
    
    return {
        ...torefs(obj)// 把obj转为响应式的ref，不然template里获取不到
    }
   }
}
</script>
<style>
</style>

watchEffect() смотреть реквизит

// 父组件.vue
<template>
   <ZiComp val:'1'/>
</template>
<script>

import ziComp from './ziComp.vue'
export default {
  components： {
      ziComp
  }, //components方法也是和2.0相同
  setup(props, context) {
      
  }
}
</script>
-------------------------------------- 
//ziComp.vue
<template>
 <div>{{obj.data1}}</div>
</template>
<script>
import { Reactive } from 'vue'
export default {
  props: ['val'], //这里获取props和 2.0 一样,也可以用对象形式
  setup(props, context) {
     watchEffect(() => {  //首次和props改变才会执行这里面的代码
         console.log(props.val)
     })
  }
}
</script>
<style>
</style>

Смотреть () слушатель

контролировать отдельные данные
<template>
<div>{{count}}</div>
</template>
<script>
import { Reactive } from 'vue'
export default {
  setup(props, context) {
   let count1 = ref(0)
   let state = reactive({
      count2: 0
   )
    //监听reactive类型
   watch(
   () => state.count2， //这里是你要监听的数据
   (count， preCount) => { //count新值， preCount旧值
       console.log('') //这里是监听数据变化后执行的函数
   }, {lazy： false}//在第一次创建不监听)
   
   //监听ref类型
     watch(count1，(count， preCount) => { //count新值， preCount旧值
       console.log('') //这里是监听数据变化后执行的函数
     })
   
   return {
       count
       ...toRefs(state)
   }
  }
}
</script>
<style>
</style>
Мониторинг нескольких данных
<template>
<div>{{count}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count1 = ref(0)
    let name1 = ref(0)
   let state = reactive({
      count2: 0，
      name2： 'yangy'
   )
    //监听多个reactive类型
   watch(
       [() => state.count2, () => state.name2]
       ([count， name], [preCount， preName]) => { //count新值， preCount旧值
           console.log('') //这里是监听数据变化后执行的函数
       }, 
       {
          lazy： false
   })//在第一次创建不监听
   
   //监听ref类型
  watch(
       [count2, name2]
       ([count， name], [preCount， preName]) => { //count新值， preCount旧值
           console.log('') //这里是监听数据变化后执行的函数
       }, {lazy： false}//在第一次创建不监听)
   
   return {
       count，
       ...toRefs(state)
   }
  }
}
</script>
<style>
</style>

вычисленные() вычисляемые свойства Можно создать только для чтения и два для чтения и записи.

<template>
<div>{{addCount}}</div>
<div>{{addCount2}}</div>
</template>
<script>
import { setup, Reactive } from 'vue'
export default {
  setup(props, context) {
   let count = ref(0)
   
  setup () {
      const count = ref(0)
      const addCount = computed(() => count.value + 1) //只读 ，count.value变化后执行加1
      
      const addCount2 = computed({
          get:() => count.value + 1,
          set: (value) => count.value = value 
      })    
      // addCount2.value = 10   //赋值方法
      
     return {
         count,
         addCount,
         addCount2
     }
  }
  }
}
</script>
<style>
</style>

Адрес фронтенд проектаGitHub.com/ян Y-19/vu…

Адрес проекта узлаGitHub.com/ян Y-19/КО…

Это использование Vue3.demo, в основном используется новый синтаксис, который будет оптимизирован в будущем.Хотя это всего лишь купол, я надеюсь, что вы можете дать мне звезду, чтобы поощрить его.

заключительные замечания

В этой главе давайте сначала перейдем сюда.В следующей главе мы напишем о жизненном цикле, получении dom, router и vuex.Давайте обратим внимание.
Вышеизложенное является моим собственным мнением и резюме.Если есть какие-либо ошибки в написании, пожалуйста, поправьте меня!Если есть другие неясные вещи о Vue3.0, вы можете прокомментировать ниже и обсудить вместе.

Vue3.0 && Vue3.0 первый опыт 2Наггетсы.Вкус/пост/685041...

Категории