Vue observer 源码
性能提升效果对比" >🎜Object.freeze()
를 사용하여 성능 향상🎜🎜🎜구성 요소 최적화 외에도 vue 종속성 변환으로 시작할 수도 있습니다. 초기화 중에 Vue는 데이터에 대해 getter 및 setter 변환을 수행합니다. 최신 브라우저에서는 이 프로세스가 실제로 매우 빠르지만 여전히 최적화할 여지가 있습니다. 🎜🎜Object.freeze()
는 객체를 고정할 수 있으며, 고정 후에는 새 속성을 객체에 추가할 수 없고, 기존 속성의 값을 수정할 수 없으며, 기존 속성을 삭제할 수 없습니다. 개체는 기존 속성의 열거 가능성, 구성 가능성 및 쓰기 가능성을 수정할 수 없습니다. 이 메서드는 고정된 개체를 반환합니다. 🎜🎜일반 JavaScript 객체를 Vue 인스턴스의 data
옵션에 전달하면 Vue는 객체의 모든 속성을 탐색하고 🎜Object.defineProperty🎜를 사용하여 이러한 모든 속성을 getter/setter로 변환합니다. , 이러한 getter/setter는 사용자에게 보이지 않지만 내부적으로는 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다. 🎜
但 Vue 在遇到像 Object.freeze()
这样被设置为不可配置之后的对象属性时,不会为对象加上 setter getter 等数据劫持的方法。参考 Vue 源码
Vue observer 源码
性能提升效果对比
Vue 데이터 동결의 용도는 무엇입니까?
vue에서는 데이터 고정 "Object.freeze()" 메소드를 사용하여 객체를 고정하고 객체의 속성을 수정하는 것은 금지되어 있습니다(배열도 본질적으로 객체이기 때문에 이 메소드는 배열에 사용할 수 있습니다) ). 객체가 고정된 후에는 기존 속성을 삭제할 수 없으며 객체의 기존 속성에 대한 열거 가능성, 구성 가능성 및 쓰기 가능성을 수정할 수 없으며 기존 속성의 값도 수정할 수 없습니다. 프로토타입 역시 수정할 수 없습니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
Vue 문서에 데이터 바인딩 및 응답을 소개할 때 Object.freeze() 메서드를 전달한 객체는 응답으로 업데이트될 수 없다는 점에 특히 명시되어 있습니다. 그래서 Object.freeze() 메소드의 구체적인 의미를 구체적으로 확인해 보았습니다.
의미
Object.freeze() 메서드는 객체를 고정하고 객체 속성의 수정을 금지하는 데 사용됩니다(배열은 본질적으로 객체이므로
, 이 메서드는 배열에 사용할 수 있습니다) ). Mozilla MDN에는 다음과 같이 소개되어 있습니다. 数组本质也是对象
,因此该方法可以对数组使用)。在 Mozilla MDN 中是如下介绍的:
可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,
不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改
该方法的返回值是其参数本身。
需要注意的是以下两点
1、Object.freeze() 和 const 变量声明不同,也不承担 const 的功能。
const和Object.freeze()完全不同
- const的行为像 let。它们唯一的区别是, const定义了一个无法重新分配的变量。 通过 const声明的变量是具有块级作用域的,而不是像 var声明的变量具有函数作用域。
- Object.freeze()接受一个对象作为参数,并返回一个相同的不可变的对象。这就意味着我们不能添加,删除或更改对象的任何属性。
- const和Object.freeze()并不同,const是防止变量重新分配,而Object.freeze()是使对象具有不可变性。
以下代码是正确的:
2、Object.freeze() 是“浅冻结”,以下代码是生效的:
实例
常规用法
明显看到,a 的 prop 属性未被改变,即使重新赋值了。
延伸
"深冻结"
要完全冻结具有嵌套属性的对象,您可以编写自己的库或使用已有的库来冻结对象,如Deepfreeze或immutable-js
// 深冻结函数. function deepFreeze(obj) { // 取回定义在obj上的属性名 var propNames = Object.getOwnPropertyNames(obj); // 在冻结自身之前冻结属性 propNames.forEach(function(name) { var prop = obj[name]; // 如果prop是个对象,冻结它 if (typeof prop == 'object' && prop !== null) deepFreeze(prop); }); // 冻结自身(no-op if already frozen) return Object.freeze(obj); }
其实就是个简单的递归方法。但是涉及到一个很重要,但是在写业务逻辑的时候很少用的知识点 Object.getOwnPropertyNames(obj)
。我们都知道在 JS 的 Object 中存在原型链属性,通过这个方法可以获取所有的非原型链属性。
利用Object.freeze()
提升性能
除了组件上的优化,我们还可以对vue的依赖改造入手。初始化时,vue会对data做getter、setter改造,在现代浏览器里,这个过程实际上挺快的,但仍然有优化空间。
Object.freeze()
可以冻结一个对象,冻结之后不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data
객체를 고정할 수 있습니다. 고정된 개체는 더 이상 수정할 수 없습니다. 개체가 고정된 경우 새 특성을 개체에 추가할 수 없고 기존 특성을 삭제할 수 없으며 개체의 기존 특성에 대한 열거 가능성, 구성 가능성 및 쓰기 가능성을 수정할 수 없습니다. , 기존 속성의 값을 수정할 수 없습니다. 또한 객체의 프로토타입은 고정한 후에 수정할 수 없습니다.
- const는 let처럼 동작합니다. 둘 사이의 유일한 차이점은 const가 재할당할 수 없는 변수를 정의한다는 것입니다. const로 선언된 변수에는 블록 범위가 있지만 var로 선언된 변수와 같은 함수 범위는 없습니다.
- Object.freeze()는 객체를 매개변수로 받아들이고 동일한 불변 객체를 반환합니다. 즉, 개체의 속성을 추가, 삭제 또는 변경할 수 없습니다.
- Const는 Object.freeze()와 다릅니다. const는 변수가 재할당되는 것을 방지하는 반면 Object.freeze()는 객체를 변경할 수 없게 만듭니다.
🎜예🎜🎜🎜일반 사용법 🎜🎜
🎜🎜분명한 재할당되더라도 a의 prop 속성은 변경되지 않았습니다. 🎜🎜Extensions🎜🎜🎜"Deep Freeze"🎜🎜중첩된 속성이 있는 개체를 완전히 고정하려면 고유한 라이브러리를 작성하거나 기존 라이브러리를 사용하여 <와 같은 개체를 고정할 수 있습니다. a target="_blank" href="https://www.php.cn/link/4a5b6a06ed76e8740ccc925fa9532ef2" title="https://github.com/substack/deep-freeze" ref="nofollow noopener noreferrer"> Deepfreeze🎜 또는 immutable-js🎜🎜ES6: Object.assign({}, frozenObject);
lodash: _.assign({}, frozenObject);
로그인 후 복사로그인 후 복사🎜는 실제로 간단한 재귀 방법입니다. 그러나 이는 비즈니스 논리 Object.getOwnPropertyNames(obj)
를 작성할 때 매우 중요하지만 거의 사용되지 않는 지식 포인트를 포함합니다. 우리 모두는 JS 객체에 프로토타입 체인 속성이 있다는 것을 알고 있으며, 프로토타입이 아닌 모든 체인 속성은 이 방법을 통해 얻을 수 있습니다. 🎜🎜Object.freeze()
를 사용하여 성능 향상🎜🎜🎜구성 요소 최적화 외에도 vue 종속성 변환으로 시작할 수도 있습니다. 초기화 중에 Vue는 데이터에 대해 getter 및 setter 변환을 수행합니다. 최신 브라우저에서는 이 프로세스가 실제로 매우 빠르지만 여전히 최적화할 여지가 있습니다. 🎜🎜Object.freeze()
는 객체를 고정할 수 있으며, 고정 후에는 새 속성을 객체에 추가할 수 없고, 기존 속성의 값을 수정할 수 없으며, 기존 속성을 삭제할 수 없습니다. 개체는 기존 속성의 열거 가능성, 구성 가능성 및 쓰기 가능성을 수정할 수 없습니다. 이 메서드는 고정된 개체를 반환합니다. 🎜🎜일반 JavaScript 객체를 Vue 인스턴스의 data
옵션에 전달하면 Vue는 객체의 모든 속성을 탐색하고 🎜Object.defineProperty🎜를 사용하여 이러한 모든 속성을 getter/setter로 변환합니다. , 이러한 getter/setter는 사용자에게 보이지 않지만 내부적으로는 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다. 🎜
但 Vue 在遇到像 Object.freeze()
这样被设置为不可配置之后的对象属性时,不会为对象加上 setter getter 等数据劫持的方法。参考 Vue 源码
Vue observer 源码

性能提升效果对比
在基于 Vue 的一个 big table benchmark 里,可以看到在渲染一个一个 1000 x 10 的表格的时候,开启Object.freeze()
前后重新渲染的对比。
big table benchmark

开启优化之前

开启优化之后

在这个例子里,使用了 Object.freeze()
比不使用快了 4 倍
为什么Object.freeze()
的性能会更好
不使用Object.freeze()
的CPU开销

使用 Object.freeze()
的CPU开销

对比可以看出,使用了 Object.freeze()
之后,减少了 observer 的开销。
Object.freeze()
应用场景
由于 Object.freeze()
会把对象冻结,所以比较适合展示类的场景,如果你的数据属性需要改变,可以重新替换成一个新的 Object.freeze()
的对象。
Javascript对象解冻
修改 React props
React生成的对象是不能修改props的, 但实践中遇到需要修改props的情况. 如果直接修改, js代码将报错, 原因是props对象被冻结了, 可以用Object.isFrozen()来检测, 其结果是true. 说明该对象的属性是只读的.
那么, 有方法将props对象解冻, 从而进行修改吗?
事实上, 在javascript中, 对象冻结后, 没有办法再解冻, 只能通过克隆一个具有相同属性的新对象, 通过修改新对象的属性来达到目的.
可以这样:
ES6: Object.assign({}, frozenObject);
lodash: _.assign({}, frozenObject);
로그인 후 복사로그인 후 복사来看实际代码:
function modifyProps(component) {
let condictioin = this.props.condictioin,
newComponent = Object.assign({}, component),
newProps = Object.assign({}, component.props)
if (condictioin) {
if (condictioin.add) newProps.add = true
if (condictioin.del) newProps.del = true
}
newComponent.props = newProps
return newComponent
}
로그인 후 복사锁定对象的方法
- Object.preventExtensions()
no new properties or methods can be added to the project
对象不可扩展, 即不可以新增属性或方法, 但可以修改/删除
- Object.seal()
same as prevent extension, plus prevents existing properties and methods from being deleted
在上面的基础上,对象属性不可删除, 但可以修改
- Object.freeze()
same as seal, plus prevent existing properties and methods from being modified
在上面的基础上,对象所有属性只读, 不可修改
以上三个方法分别可用Object.isExtensible(), Object.isSealed(), Object.isFrozen()来检测
Object.freeze( ) 阻止Vue无法实现 响应式系统
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。但是如果使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
具体使用办法举例:
<template>
<div>
<p>freeze后会改变吗
{{obj.foo}}
</p>
<!-- 两个都不能修改??为什么?第二个理论上应该是可以修改的-->
<button @click="change">点我确认</button>
</div>
</template>
<script>
var obj = {
foo: '不会变'
}
Object.freeze(obj)
export default {
name: 'index',
data () {
return {
obj: obj
}
},
methods: {
change () {
this.obj.foo = '改变'
}
}
}
</script>
로그인 후 복사运行后:

从报错可以看出只读属性foo不能进行修改,Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉,将上述代码更改为:
<button @click="change">点我确认</button>
change () {
this.obj = {
foo: '会改变'
}
}
로그인 후 복사Object.freeze()是ES5新增的特性,可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。防止对象被修改。
如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。
实践心得和技巧
Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改。
vue 1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增。
并且,Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉。举个例子:
<p v-for="item in list">{{ item.value }}</p>
로그인 후 복사new Vue({
data: {
// vue不会对list里的object做getter、setter绑定
list: Object.freeze([
{ value: 1 },
{ value: 2 }
])
},
created () {
// 界面不会有响应
this.list[0].value = 100;
// 下面两种做法,界面都会响应
this.list = [
{ value: 100 },
{ value: 200 }
];
this.list = Object.freeze([
{ value: 100 },
{ value: 200 }
]);
}
})
로그인 후 복사vue的文档没有写上这个特性,但这是个非常实用的做法,对于纯展示的大数据,都可以使用Object.freeze提升性能。
위 내용은 Vue 데이터 동결의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
ES6: Object.assign({}, frozenObject); lodash: _.assign({}, frozenObject);
Object.getOwnPropertyNames(obj)
를 작성할 때 매우 중요하지만 거의 사용되지 않는 지식 포인트를 포함합니다. 우리 모두는 JS 객체에 프로토타입 체인 속성이 있다는 것을 알고 있으며, 프로토타입이 아닌 모든 체인 속성은 이 방법을 통해 얻을 수 있습니다. 🎜🎜Object.freeze()
를 사용하여 성능 향상🎜🎜🎜구성 요소 최적화 외에도 vue 종속성 변환으로 시작할 수도 있습니다. 초기화 중에 Vue는 데이터에 대해 getter 및 setter 변환을 수행합니다. 최신 브라우저에서는 이 프로세스가 실제로 매우 빠르지만 여전히 최적화할 여지가 있습니다. 🎜🎜Object.freeze()
는 객체를 고정할 수 있으며, 고정 후에는 새 속성을 객체에 추가할 수 없고, 기존 속성의 값을 수정할 수 없으며, 기존 속성을 삭제할 수 없습니다. 개체는 기존 속성의 열거 가능성, 구성 가능성 및 쓰기 가능성을 수정할 수 없습니다. 이 메서드는 고정된 개체를 반환합니다. 🎜🎜일반 JavaScript 객체를 Vue 인스턴스의 data
옵션에 전달하면 Vue는 객체의 모든 속성을 탐색하고 🎜Object.defineProperty🎜를 사용하여 이러한 모든 속성을 getter/setter로 변환합니다. , 이러한 getter/setter는 사용자에게 보이지 않지만 내부적으로는 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다. 🎜
但 Vue 在遇到像 Object.freeze()
这样被设置为不可配置之后的对象属性时,不会为对象加上 setter getter 等数据劫持的方法。参考 Vue 源码
Vue observer 源码
性能提升效果对比
在基于 Vue 的一个 big table benchmark 里,可以看到在渲染一个一个 1000 x 10 的表格的时候,开启Object.freeze()
前后重新渲染的对比。
big table benchmark
开启优化之前
开启优化之后
在这个例子里,使用了 Object.freeze()
比不使用快了 4 倍
为什么Object.freeze()
的性能会更好
不使用Object.freeze()
的CPU开销
使用 Object.freeze()
的CPU开销
对比可以看出,使用了 Object.freeze()
之后,减少了 observer 的开销。
Object.freeze()
应用场景
由于 Object.freeze()
会把对象冻结,所以比较适合展示类的场景,如果你的数据属性需要改变,可以重新替换成一个新的 Object.freeze()
的对象。
Javascript对象解冻
修改 React props React生成的对象是不能修改props的, 但实践中遇到需要修改props的情况. 如果直接修改, js代码将报错, 原因是props对象被冻结了, 可以用Object.isFrozen()来检测, 其结果是true. 说明该对象的属性是只读的.
那么, 有方法将props对象解冻, 从而进行修改吗?
事实上, 在javascript中, 对象冻结后, 没有办法再解冻, 只能通过克隆一个具有相同属性的新对象, 通过修改新对象的属性来达到目的.
可以这样:
ES6: Object.assign({}, frozenObject); lodash: _.assign({}, frozenObject);
来看实际代码:
function modifyProps(component) { let condictioin = this.props.condictioin, newComponent = Object.assign({}, component), newProps = Object.assign({}, component.props) if (condictioin) { if (condictioin.add) newProps.add = true if (condictioin.del) newProps.del = true } newComponent.props = newProps return newComponent }
锁定对象的方法
- Object.preventExtensions()
no new properties or methods can be added to the project 对象不可扩展, 即不可以新增属性或方法, 但可以修改/删除
- Object.seal()
same as prevent extension, plus prevents existing properties and methods from being deleted 在上面的基础上,对象属性不可删除, 但可以修改
- Object.freeze()
same as seal, plus prevent existing properties and methods from being modified 在上面的基础上,对象所有属性只读, 不可修改
以上三个方法分别可用Object.isExtensible(), Object.isSealed(), Object.isFrozen()来检测
Object.freeze( ) 阻止Vue无法实现 响应式系统
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。但是如果使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
具体使用办法举例:
<template> <div> <p>freeze后会改变吗 {{obj.foo}} </p> <!-- 两个都不能修改??为什么?第二个理论上应该是可以修改的--> <button @click="change">点我确认</button> </div> </template> <script> var obj = { foo: '不会变' } Object.freeze(obj) export default { name: 'index', data () { return { obj: obj } }, methods: { change () { this.obj.foo = '改变' } } } </script>
运行后:
从报错可以看出只读属性foo不能进行修改,Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉,将上述代码更改为:
<button @click="change">点我确认</button> change () { this.obj = { foo: '会改变' } }
Object.freeze()是ES5新增的特性,可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。防止对象被修改。 如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。
实践心得和技巧
Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改。
vue 1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增。
并且,Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉。举个例子:
<p v-for="item in list">{{ item.value }}</p>
new Vue({ data: { // vue不会对list里的object做getter、setter绑定 list: Object.freeze([ { value: 1 }, { value: 2 } ]) }, created () { // 界面不会有响应 this.list[0].value = 100; // 下面两种做法,界面都会响应 this.list = [ { value: 100 }, { value: 200 } ]; this.list = Object.freeze([ { value: 100 }, { value: 200 } ]); } })
vue的文档没有写上这个特性,但这是个非常实用的做法,对于纯展示的大数据,都可以使用Object.freeze提升性能。
위 내용은 Vue 데이터 동결의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.

VUE에서 DIV 요소를 점프하는 두 가지 방법이 있습니다. VUE 라우터를 사용하고 라우터 링크 구성 요소를 추가하십시오. @Click 이벤트 리스너를 추가하고 이것을 호출하십시오. $ router.push () 메소드를 점프하십시오.
