ホームページ > 記事 > ウェブフロントエンド > vue3 と vue2 の構文の違いは何ですか
vue3 と vue2 の構文の違いは何ですか
- WBOYオリジナル
- 2022-06-23 17:17:029602ブラウズ
vue3 と vue2 の構文の違い: 1. vue2 は webpack を使用してプロジェクトをビルドするのに対し、vue3 は vite を使用してプロジェクトをビルドします; 2. vue2 は操作に pototype フォームを使用でき、コンストラクターが導入されています。 vue3 は構造体のフォームを使用して動作する必要があり、ファクトリ関数が導入されています。
このチュートリアルの動作環境: Windows 10 システム、Vue3 バージョン、Dell G3 コンピューター。
vue3 と vue2 の構文の違いは何ですか
1.webpack と vite
vue2 は webpack を使用しますプロジェクトのビルド
Webpack はエントリ ファイルから開始し、次にルート、次にモジュールを分析し、最後にそれをパッケージ化して、サーバーを開始する準備ができたことを通知します。
vue3 は vite を使用してプロジェクトを構築します
最初にサーバーの準備ができていることを伝え、次に HTTP リクエストを送信するのを待ち、次にエントリ ファイル、動的インポート (動的インポート) コード分割ポイント (コード分割)
最大の利点と違いは、プロジェクト内にさらに多くのコード ファイルがある場合に、将来更新されたデータを保存するときに、実際の効果をより迅速に確認できるようにするため、いわゆる (ホットupdate)
2.main.js ファイル
##vue2ではプロトタイプ(プロトタイプ)という形式で動作させることができます。 vue3では構造体の形式を利用して動作させる必要があります導入するのはFactory関数ですvue3のアプリコンポーネントはルートタグを持たせられません
3.setup 関数
setup 関数は Return out を返す必要があります<script>
export default {
name: 'appName',
setup(){
//变量
let name = '打工仔'
let age = 18
//方法
function say(){
console.log(`我只是一个${name},今年${age}岁`)
}
//返回一个对象
return {
name,
age,
say
}
}
}
</script>現在の ${ に名前が含まれていることがわかります。 name} をこれで操作する必要はありません。this の機能は特定のスコープ内の変数を取得するだけであり、setup 関数は現在のこのスコープのみ を提供します。現時点では非常に不快です。定義したすべての変数とメソッドを返す必要があるという意味ではありませんか? Vue3 では、スクリプト タグに が提供されます。5101c0cdbdc49998c642c71f6b6410a82cacc6d41bbb37262a98f745aa00fbf0 のようなセットアップを追加します。 注: セットアップは前よりも前に作成され、ライフ サイクルが作成されます。つまり、現時点ではこれを直接使用します。データ内のデータを取得するには、まだ未定義です。 セットアップ構文レッスンは 2 つのパラメーター setup(props,context) を受け取りますvue2 の this.$attrs、this.$slots はご存知のとおり、this.$emit は attrs、slots と同等です、コンテキストで出力注: パラメータを 1 つだけ受け入れると、ページに警告が表示されますが、使用には影響しません
4. 手順とスロット
vue2 ではスロットを直接使用できますが、vue3 では v-slot 形式を使用する必要がありますv-for および v-if vue2 では、v- for 命令が最も優先され、vue3 で v-for と v-if を併用することは推奨されません。現在の v-if は v-for の判定文としてのみ扱われ、互いに競合しません。 vue3 の v-on の修飾子として keyCode を削除します。もちろん、config.keyCodes はサポートされませんvue3 の v-on.native 修飾子を削除します vue3 5.ref と reactiveref
のフィルターフィルターデータを変更するレスポンシブデータの場合、ref はデータを変更しますコードを直接操作すると、コードを変更できません。get と set を使用すると、現在の名前と年齢がページを変更していることがわかります。この時点では、.value を使用する必要があり、ref は依然として Refimpl# です##<template>
<div class="home">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<button @click="say">修改</button>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'Home',
setup(){
let name = ref('中介')
let age = ref(18)
console.log(name)
console.log(age)
//方法
function say(){
name='波妞'
age=18
}
return {
name,
age,
say
}
}
}
</script>この場合、ページに {{name.value}} を表示する必要はありません。実際、これを行う必要はありません。vue3 では、あなたの ref がはオブジェクトなので、自動的に与えられます。.valueを追加すると、refオブジェクトを自分で定義すると、インスタンスはrefimplになります。このとき、XX.value.XXを使用して修正します
<template>
<div class="home">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h2>职业：{{job.occupation}}</h2>
<h2>薪资：{{job.salary}}</h2>
<button @click="say">修改</button>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'Home',
setup(){
let name = ref('中介')
let age = ref(18)
let job=ref({
occupation:'程序员',
salary:'10k'
})
console.log(name)
console.log(age)
//方法
function say(){
job.value.salary='12k'
}
return {
name,
age,
job,
say
}
}
}
</script>At this vue3 の最下層はプロキシ オブジェクトであり、Object.defineProperty の get および set に従って基本データ型がハイジャックされるため、オブジェクトはプロキシ オブジェクトになります。カプセル化された reactive は、ref を呼び出すときに自動的に行われるのと同じです。 call reactive
reactive
ref 内のオブジェクトが reactive を呼び出し、オブジェクトをプロキシに変換すると上で述べました。深い応答性を実現する reactive で Proxy に変更します
<template>
<div class="home">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h2>职业：{{job.occupation}}<br>薪资：{{job.salary}}</h2>
<h3>爱好：{{hobby[0]}},{{hobby[1]}},{{ hobby[2] }}</h3>
<button @click="say">修改</button>
</div>
</template>
<script>
import {ref,reactive} from 'vue'
export default {
name: 'Home',
setup(){
let name = ref('波妞')
let age = ref(18)
let job=reactive({
occupation:'程序员',
salary:'10k'
})
let hobby=reactive(['吃饭','睡觉','打豆豆'])
console.log(name)
console.log(age)
//方法
function say(){
job.salary='12k'
hobby[0]='学习'
}
return {
name,
age,
job,
say,
hobby
}
}
}
</script>この時、メソッドが多すぎると感じると思いますが、ref で提供されている .value を使用する方が良いです。更新しますか? しかし問題があります。大量のデータがある場合、常に .value に移動する必要はありません。煙が出るまでクリックします。このとき、vue2 でシミュレートされたデータの形式を使用できます
<template>
<div class="home">
<h1>姓名：{{data.name}}</h1>
<h1>年龄：{{data.age}}</h1>
<h2>职业：{{data.job.occupation}}<br>薪资：{{data.job.salary}}</h2>
<h3>爱好：{{data.hobby[0]}},{{data.hobby[1]}},{{ data.hobby[2] }}</h3>
<button @click="say">修改</button>
</div>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'Home',
setup(){
let data=reactive({
name:'波妞',
age:18,
job:{
occupation:'程序员',
salary:'10k'
},
hobby:['吃饭','睡觉','打豆豆']
})
//方法
function say(){
data.job.salary='12k'
data.hobby[0]='学习'
}
return {
data,
say,
}
}
}
</script>refとreactiveの違い
refは基本的なデータ型を定義します
refはObject.definePropertyのgetとsetによるデータハイジャックを実装します()
ref は data.value を操作しますが、読み取り時には必要ありません。 value
reactive は、オブジェクトまたは配列のデータ型を定義します。
reactive は、プロキシを介したデータ ハイジャックを実装します。
reactive 操作とデータの読み取りは必要ありません。value
#6.vue3 の応答性の原則vue2 の属性を読み取って変更するメソッドです。追加または削除すると、ページはリアルタイムでは更新されません直接通过下标改数组，页面也不会实时更新
vue3中响应式原理使用Proxy进行代理，使用window内置对象Reflect反射，学了Es6的语法的就知道我们在使用Proxy进行代理，好比甲方公司给出需要什么技术的前端攻城狮，让乙方去干招聘、面试等环节
Proxy可以拦截对象中任意的属性变化，当然包括读写，添加，删除等
Reflect对源对象属性进行操作
const p=new Proxy(data, {
// 读取属性时调用
get (target, propName) {
return Reflect.get(target, propName)
},
//修改属性或添加属性时调用
set (target, propName, value) {
return Reflect.set(target, propName, value)
},
//删除属性时调用
deleteProperty (target, propName) {
return Reflect.deleteProperty(target, propName)
}
})【相关推荐：《vue.js教程》】
以上がvue3 と vue2 の構文の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。