목차
vue가 데이터를 수정한 후 페이지가 새로고침되지 않습니다.
VUEX
vuex가 무엇입니까
Vuex: Vue의 상태 관리 도구로 모든 구성 요소에서 사용할 수 있는 공용 데이터를 관리합니다.
vuex의 영구 데이터
플러그인 설치
npm i vuex-persistedstate --savestore/index.js에 도입됨
import vuexPersist from "vuex-persistedstate"구성
plugins: [ new vuexPersist({ storage: window.localStorage, }).plugin, ],vuex의 5개 코어
| 상태 |
상태는 데이터와 동일한 데이터를 저장합니다. |
| 돌연변이 |
상태를 수정할 수 있는 곳이며, 상태를 수정할 수 있는 권한만 가집니다. |
| 게터 |
계산된 속성과 동일 |
| 행위 |
vuex에서 비동기 작업을 수행하는 위치 |
| 모듈 |
상태가 많을 때 모듈은 모듈에 의해 관리됩니다. |
상태는 this.$store.state.xxx를 사용합니다.
데이터가 변경되면 자동으로 업데이트되는 계산된 속성을 사용하는 것이 좋습니다.
변형은 this.$store.commit('이벤트 이름', 전달된 매개변수)을 사용합니다.
mutations의 이벤트에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 vuex의 상태인 상태여야 하고 두 번째 매개변수는 전달된 값입니다.
행동의 사용
내부의 각 이벤트에는 연관된 vuex 컨텍스트의 인스턴스 인 컨텍스트 매개변수가 있습니다.
vue 페이지에서 this.$store.dispath('event name')을 통해 액션을 제출할 수 있습니다.
vuex의 도우미 함수
보조 함수는 vuex의 데이터 및 메서드를 vue 구성 요소에 매핑할 수 있습니다. 작업을 단순화하는 목적을 달성하기 위해
모든 도우미 기능
mapState mapActions mapMutations mapGetters
vue 페이지에 헬퍼 기능 도입
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'지침:
mapState와 mapGetters는 계산된 속성에서 사용하는 것이 좋으며 데이터 데이터로 바로 사용할 수 있습니다.
computed: {
...mapState(["shopData"]),
},다른 보조 기능은 메서드에 있습니다.
methods: {
...mapActions(["getData"]),
...mapMutations(["add"]),
}자세한 모듈화 및 보조 기능 사용을 보려면 여기를 클릭하십시오.
뷰 라우터
프런트엔드 라우팅 원칙
라우팅은 URL을 구문 분석하고 해당 컨트롤러를 호출하여 페이지를 다시 요청하지 않고 페이지 보기를 업데이트하는 데 사용됩니다.
라우팅 패턴
라우팅은 해시 모드와 히스토리 모드 로 나뉩니다.
해시와 히스토리 간 전환
라우터의 index.js 파일에는 새로운 Router() 가 있으며 내부 모드는 기본적으로 해시 모드이며 여기에서 히스토리 모드로 변경할 수 있습니다.
const router = new VueRouter({
routes,
mode:'hash' //可在这里更改为history模式
})해시 모드
해시 모드: 브라우저의 "#" 기호와 # 뒤의 문자를 해시라고 합니다.
http://localhost:8080/#/login
특징
1 해시는 http 요청에 포함되지 않으므로 해시를 변경해도 페이지가 다시 로드되지 않습니다.
2 hashchange 는 해시 변경 이벤트를 모니터링하는 데 사용됩니다.
3 변경할 때마다 기록이 브라우저에 추가됩니다.
방법
HashHistory.push 점프 경로, 히스토리 스택 추가
HashHistory.replace() 경로로 이동하여 기록을 추가하지 않고 현재 페이지를 직접 바꿉니다.
히스토리 모드
http://localhost:8080/home
특징
1 기록 모드의 URL은 백엔드의 URL과 동일해야 하며 백엔드에 해당 경로가 없으면 404 오류를 반환합니다.
2 popState(window.onpopstate )는 기록 변경 이벤트를 모니터링하는 데 사용됩니다.
방법
history.pushState() 경로 이동, 히스토리 스택 추가
history.replaceState() 경로로 이동하여 기록을 추가하지 않고 현재 페이지를 직접 바꿉니다.
라우팅 매개변수
쿼리, 매개변수, 동적 라우팅 매개변수
(1) params는 이름만 사용할 수 있습니다. 쿼리는 이름과 경로를 사용할 수 있습니다.
(2) params로 새로고침하면 유실되지만 쿼리로 새로고침하면 유실되지 않는다.
(3) 주소 표시줄에 매개변수가 표시되지 않지만 쿼리는 표시됩니다.
(4) 매개변수는 동적 라우팅과 함께 사용할 수 있지만 쿼리는 사용할 수 없습니다.
// query 传参
this.$router.push({ path:'/user', query:{ userId:5 } })
// params 传参
this.$router.push({ name:'user', params:{ userId:5 } })
// 动态路由传参
path: 'config/:lawCode/salary/:lawVersionCode',
name: 'basicLawSalary',
this.$router.push(`config/${this.lawCode}/salary/${this.lawVersionCode}`)
// 动态路由获取
this.$route.params.lawCode
라우팅 점프
탐색 라우팅
<라우터 링크='/'>
프로그래밍 방식의 라우팅
| 라우터.푸시( ) |
기록 스택에 기록을 저장하고 뒤로를 클릭한 다음 이전 기록으로 돌아갑니다. 라우터 링크를 푸시라고 합니다. |
| 라우터.교체() |
히스토리 스택은 저장되지 않지만 현재 히스토리는 대체됩니다. 현재 기능을 활성화하려면 router-link에 replace를 추가하거나 router.push 객체에 replace:true를 추가 할 수 있습니다. |
| 라우터.고(-3) |
() 안의 매개변수는 히스토리 스택에서 앞으로 또는 뒤로 단계 수를 나타내는 정수입니다. -1은 이전 히스토리로 돌아가고, 0은 페이지를 새로 고치고, 1은 다음 히스토리로 돌아갑니다. |
Vue의 라우팅 가드
라우팅 가드는 글로벌 가드, 라우팅 전용 가드, 컴포넌트 가드로 나뉩니다.
각 가드는 세 가지 인수를 받습니다.
들어 가려고目标路由对象
from 현재 내비게이션이 하려고 합니다.离开的路由
다음 경로에서 수행할 작업을 확인하는 매개변수를 정의하는 다음 후크 기능
글로벌 가드
| 라우터.전각 | 글로벌 프론트 가드는 입력한 페이지에 로그인이 필요한지 여부를 판단하는 데 가장 적합합니다. |
| 라우터.비포리졸브 | 글로벌 파싱 가드 확인 가드는 탐색이 확인되기 전에 구성 요소 내 모든 가드 및 비동기 라우팅 구성 요소가 해결된 후 호출됩니다. |
| router.afterEach | 글로벌 포스트후크는 일반적으로 동적 요청 헤더를 설정하는 데 사용되며 여기서 next() 는 중복됩니다. |
Global Guard의 특정 응용 프로그램을 보려면 클릭하십시오.
라우팅 전용 가드 beforeEnter
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
구성 요소 내의 가드
| 이전경로입력 | 그룹 구성 요소에 들어가기 전에 가드 참고: 여기에서 vue를 얻을 수 없지만 다음으로 콜백을 전달하여 구성 요소 인스턴스에 액세스할 수 있습니다. 다음 ( vm=> { console.log(vm) } ) vm은 vue의 컴포넌트 인스턴스입니다. 일반적으로 사용자가 변경 사항을 저장하지 않고 갑자기 떠나는 것을 방지하기 위해 사용됩니다. next(false) 로 내비게이션을 취소 할 수 있습니다. |
| 전에경로업데이트 | 경로 업데이트에 대한 경비원 |
| 전에경로떠나다 | 구성 요소를 떠날 때 가드 |
탐색 분석 프로세스 완료
1. 비활성화된 구성 요소에서 beforeRouteLeave 구성 요소를 호출하여 가드를 나갑니다 .
2 글로벌 라우터를 호출합니다 .beforeEach 글로벌 프리가드 .
3 재사용된 구성 요소에서 beforeRouteUpdate 구성 요소 업데이트 가드를 호출합니다 .
4 라우팅 구성에서 라우팅 전용 가드를 입력하기 전에
호출합니다 . 5 비동기 라우팅 구성 요소를 구문 분석합니다.
6 활성화된 구성 요소에서 beforeRouteEnter 구성 요소를
호출하여 가드에 진입합니다 . 7 글로벌 라우터를 호출합니다 .beforeResolve 글로벌 해상도 가드 .
8 내비게이션이 확인되었습니다.
9 글로벌 라우터를 호출합니다 .afterEach global after hook .
10 DOM 업데이트를 트리거합니다.
11 beforeRouteEnter 가드에서 next로 전달된 콜백 함수를 호출하면 생성된 컴포넌트 인스턴스가 콜백 함수의 매개변수로 전달됩니다.
라우팅 관련 문제
vue 라우팅으로 같은 페이지로 점프하는 오류 문제를 보려면 클릭하십시오.
비계 렘 적응
API 요청 캡슐화
여러 환경 변수
웹팩 구성
webpack은 도메인 간 구성 요청, 별칭 및 패키지 구성을 만들 수 있습니다.
패키징 구성에는 경로 변경, 프로덕션 환경에서 sourceMap 리소스 매핑 파일 제거, console.log 인쇄 및 주석 제거, CDN을 사용하여 최적화 가속화, 리소스 파일 압축, 이미지 압축, 공개 코드 추출 및 패키징 분석이 포함됩니다.
Vue의 두 항목 데이터 바인딩
뷰2
게시자-구독자 모델과 결합하여 object.defineProperty()는 각 속성의 setter를 하이재킹하는 데 사용되며 getter는 데이터가 변경될 때 구독자에게 메시지를 게시하고 해당 모니터링 콜백을 트리거하여 뷰를 렌더링합니다. 데이터와 보기의 동기화를 실현합니다.
특정 단계
1단계: 관찰자 (관찰자)는 하위 속성 개체의 속성과 세터 및 게터를 포함하여 데이터 개체를 재귀적으로 순회 해야 값이 할당될 때 세터가 트리거되고 데이터 변경이 발생합니다. 감시당하다
2단계: 컴파일 (템플릿 파서)은 템플릿 지침을 구문 분석하고, 템플릿의 변수를 데이터로 대체하고, 렌더링된 페이지 보기를 초기화하고, 업데이트 기능에 노드를 바인딩하고, 구독자를 추가합니다.
3단계: Watcher (구독자)는 Observer와 Compile 간의 통신 브리지 입니다.해야 할 주요 작업은 다음 과 같습니다. 1. 자신 을 인스턴스화
할 때 속성 구독자( dep ) 에 자신을 추가합니다. 속성 변경에 대한 dep.notice() 알림을 받으면 자체 update() 메서드를 호출하고 Compile에서 바인딩된 콜백을 트리거 할 수 있습니다.
4단계: MVVM은 데이터 바인딩 입구로 사용되고, Observer, Compile 및 Watcher를 통합하고, Observer를 사용하여 자체 모델 데이터의 변경 사항을 모니터링하고, Compile을 사용하여 템플릿 명령을 구문 분석 및 컴파일하고, 마지막으로 Watcher를 사용하여 사이의 간격을 설정합니다. 관찰자 및 컴파일 통신 브리지를 통해 데이터 변경 사항 및 보기 변경 사항을 동시에 업데이트
보기 3
es6 프록시의 set 및 get 메소드를 사용하여 데이터 하이재킹을 실현하고 vue 감시자의 업데이트 메소드를 결합하여 이중 항목 데이터 바인딩을 실현합니다.
v2에 비해 v3의 장점
- 어레이 유형의 데이터 변경 사항을 직접 모니터링
- 모니터링 대상은 개체 자체이며 각 속성을 통과할 필요가 없으며 일정한 성능 향상이 있습니다.
- 개체 속성을 직접 추가/삭제할 수 있습니다.
Vue 가상 돔, diff 알고리즘
가상 DOM이란 무엇입니까
가상 DOM은 실제 DOM 구조를 설명하기 위해 일반 js 객체를 사용하는 것입니다.이 객체에는 태그 이름(tag), 속성(attrs) 및 자식 요소 객체(children)의 세 가지 속성이 있습니다.가상 DOM은 vue의 render() 에 의해 변환됩니다. function 실제 DOM의 경우, appendChild()를 통해 페이지에 추가
가상 DOM을 사용하는 이유
실제 DOM을 생성하는 비용은 상대적으로 높고, DOM의 빈번한 작업은 상대적으로 큰 오버헤드이며, 가상 DOM을 사용하는 비용은 상대적으로 낮습니다.
가상 DOM의 성능은 기존 DOM보다 반드시 높을 필요는 없으며 가상 DOM 및 Diff 알고리즘의 등장은 명령형 프로그래밍에서 함수형 프로그래밍 및 데이터 중심 프로그래밍으로의 전환으로 인해 발생하는 성능 문제를 해결하기 위한 것입니다.
가상 DOM의 사용은 사용자의 dom 작업을 줄이기 위한 것일 뿐 실제로는 여전히 실제 dom을 작동합니다.
가상 DOM을 사용하는 것이 diff 알고리즘의 비교에 더 유리합니다.
Vue2의 diff 알고리즘
- js 객체 구조를 사용하여 실제 DOM 트리를 빌드하고 문서에 삽입
- 상태가 변경되면 새 가상 DOM을 다시 빌드하십시오.
- 그런 다음 새 가상 DOM과 기존 가상 DOM을 비교합니다. 모든 DOM을 비교하고 기록된 차이점을 실제 DOM 트리에 적용하여 뷰를 업데이트합니다.
Vue3의 diff 알고리즘
1은 생성과 동시에 VNode를 표시하고 이를 기반으로 core diff 알고리즘을 수행하는 것입니다.
2 업데이트에 참여하지 않는 요소의 경우 정적 표시 및 프롬프트는 한 번만 생성되며 렌더링 중에 직접 재사용됩니다.
vue 컴포넌트 개발
구성 요소 개발의 이점
1 코드 크기 및 반복 감소
2 유지 보수가 쉽고 수정이 쉽습니다.
3 패키지 구성 요소는 재사용 및 사용이 간편합니다.
4 팀워크에 맞춰 구성 요소별로 함께 개발된 한 페이지
구성 요소를 패키징하는 방법
1 구성 요소는 페이지 수준 구성 요소와 하위 구성 요소로 나뉩니다. 페이지 수준 구성 요소는 보기 폴더의 구성 요소입니다.
2 하위 구성 요소를 배치할 새 구성 요소 폴더를 만듭니다.
3 하위 구성 요소도 vue 파일입니다.
4 이러한 하위 컴포넌트를 사용하려면 경로에 따라 하위 컴포넌트를 가져와서 컴포넌트 에 등록 해야 합니다.
5 배치하려는 페이지 위치에 하위 구성 요소를 배치하고 카멜 케이스 사용에 주의하십시오.
구성 요소 사용 시나리오
1 머리 입력의 검색 상자
페이지에 있는 2개의 동일한 모듈(예: 헤더 하단의 모듈, 탐색 모음, 이동 경로, 슬롯을 통해 데이터 수정)
3 캐러셀 캡슐화, 위로 가기 버튼, 래더 탐색 및 기타 기능
구성 요소 스타일 침투
css 스타일 침투 >>> sass 스타일 침투 /deep/
슬롯을 사용하여 구성 요소와 구성 요소 간의 값 전달
자세한 내용은 아래 참조
컴포넌트 통신
아버지가 아들에게
1 사용자 지정 속성 전달 값
상위 컴포넌트의 하위 컴포넌트 태그에 속성을 바인딩하여 전송할 변수를 마운트합니다. 하위 구성 요소의 소품을 통해 데이터 수락
소품
props는 배열 또는 객체가 될 수 있으며 허용되는 데이터는 배열을 사용하거나 객체 형식을 사용하여 데이터 유형, 필수 값인지 여부 및 기본값을 결정하는 데 사용할 수 있습니다.
props:{
name:{
type:string, //数据类型
default:'000'，//默认值，只有值是undefined或者不传属性的时候才会生效
required:true, //是否必须传递 }
}참고: 참조 데이터 유형의 기본값은 사용하기 전에 함수에서 반환해야 합니다. 그렇지 않으면 vue 논리에서 오류를 보고합니다.
default: () => { return []/{} }소품의 속성
1 prop에 의해 형성된 데이터는 단방향 흐름으로 상위 구성 요소의 데이터 변경은 하위 구성 요소에 영향을 주지만 하위 구성 요소는 상위 구성 요소를 변경하지 않습니다.
2 하위 구성 요소에서 prop이 전달한 값을 직접 수정할 수 없습니다. 그렇지 않으면 경고가 보고됩니다.
3 prop의 검증은 전달된 데이터 유형, 필수 값 및 기본값인지 여부를 정의하는 것입니다.
4 소품이 검증되지 않은 경우 구성 요소는 모든 값을 수락할 수 있으며 이름이 동일하면 소품 데이터가 원래 데이터를 대체합니다.
2 통과 값 제공
부모 구성 요소는 provide : { }를 사용하여 데이터를 정의합니다.
하위 구성 요소는 inject: [ ]를 사용하여 데이터를 수락합니다.
참고: provide에서 제공하는 배열은 모든 하위 구성 요소에서 사용할 수 있습니다.
3 this.$parent
자식 컴포넌트에서 this.$parent 를 통해 부모 컴포넌트를 찾고 , 부모 컴포넌트 의 모든 데이터와 메서드 가져오기
아이 삼촌
맞춤 이벤트 1개
부모 구성 요소의 자식 구성 요소 태그에 사용자 지정 이벤트를 바인딩하면 자식 구성 요소가 전달한 이벤트가 수락됩니다. 자식 구성 요소는 매개 변수를 보내는 $emit를 통해 부모 구성 요소에서 사용자 지정 이벤트를 트리거합니다.
2 this.$children
부모 컴포넌트 에서 this.$children을 통해 자식 컴포넌트를 찾고 모든 자식 컴포넌트를 포함하는 클래스 배열 컬렉션을 가져옵니다.
부모-자식이 아닌 구성 요소 전달 값
1 main.js에서 전역 버스를 정의합니다. 버스는 Vue의 인스턴스화된 객체입니다.
Vue.prototype.$bus = new Vue()2 데이터 전달과 전달이 필요한 페이지 호출 이벤트
this.$bus.$emit('getData', data:this.data)3 데이터를 수락해야 하는 페이지는 이벤트를 생성하고 데이터를 가져옵니다.
this.$bus.$on('getData', (data) => { this.msg = data })4 beforeDestory 에서 청취 이벤트 닫기
beforeDestory(){
this.$bus.$off('getData')
}참고: 동작 순서는 데이터를 받는 페이지에서 이벤트가 먼저 생성된 후 데이터를 전달하는 페이지 호출 이벤트입니다.
값을 전송할 때마다 이벤트가 생성되고 너무 많은 메모리가 소비됩니다.
슬롯 슬롯
슬롯은 익명 슬롯, 명명된 슬롯 및 범위 슬롯으로 나뉩니다.
익명 슬롯
하위 컴포넌트 내부에 <slot /> 을 설정하면 익명 슬롯을 사용할 수 있으며, 데이터는 해당 슬롯에 해당하는 위치에 있게 되며, 익명 슬롯이 여러 개인 경우 각 슬롯마다 데이터 렌더링을 하게 됩니다.
익명 슬롯에는 실제로 이름이 있으며 이는 기본값 이며 일반적으로 작성되지 않습니다.
명명된 슬롯
이름을 지정하여 여러 슬롯을 구분합니다.
명명: v-slot:name은 #name 으로 축약할 수 있습니다.
V2 사용
<div slot=‘left’> </div>
或
<template v-slot:left> </template>V3 사용
<template v-slot:left> </template>범위가 지정된 슬롯
사용자 지정 속성을 통해 슬롯에서 사용하는 데이터 준비
하위 구성 요소에서
<slot name="z" :say1="say1" :say2="say2"></slot>하위 구성요소 태그
<template #z="{say1, say2}"> //解构作用域插槽的数据
<div>{
{say1}}</div>
</template>vue의 데이터가 함수인 이유
루트 인스턴스 개체 데이터는 데이터 충돌을 일으키지 않는 개체 또는 함수(루트 인스턴스는 싱글톤임)일 수 있습니다.
컴포넌트 인스턴스의 데이터는 동일한 참조 데이터로서, 컴포넌트가 퍼블릭 컴포넌트로 공유될 때 객체라면 에러를 보고하고, 한 곳의 데이터가 변경되면 모든 데이터가 함께 변경된다. 반대로 데이터가 함수라면 각 인스턴스의 데이터는 클로저에 있기 때문에 따로 영향을 받지 않는다.
vue에 대한 일반적인 명령
| v-if |
조건에 따라 요소 추가 및 삭제를 판단하는 것은 비활성이며 처음에 조건이 충족되지 않으면 생성되지 않습니다. 전환 비용이 높고 조건이 변경될 가능성이 적은 상황에 적합합니다. |
| v-else | v-if와 함께 사용되며 뒤에 v-if 또는 v-else-if가 와야 합니다. 그렇지 않으면 작동하지 않습니다. |
| 브이쇼 | 조건에 따라 요소의 표시 여부를 판단하여 display:none 을 추가 및 삭제하여 요소를 제어합니다. 초기 렌더링 비용이 높고 빈번한 상태 전환에 더 적합합니다. |
| v-for | v-for是根据遍历数据来进行渲染，要配合key使用。要注意的是当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高,不能与 v-if 同时使用,除非使用 template 空标签包裹 |
| v-on | 用来绑定一个事件或者方法，可以简写为@click |
| v-bind | 用来绑定元素的属性，一般用于绑定class值或style样式，可以简写为 ： 绑定class的三种方式： 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}] |
| v-model | 使用与表单元素，实现双项数据绑定，本质为自定义事件@input和自定义属性:value的集合 |
| v-html | 用于渲染富文本，即带有html的字符串 |
vue的自定义指令
vue允许我们设置自定义指令，自定义指令分为局部自定义指令与与全局自定义指令
局部自定义指令directives,定义在组件内部，只能在当前组件使用
全局自定义指令Vue.directive作用在全局
自定义指令的参数
| el | 所绑定的元素，可以直接操作 |
| binding |
一个对象，包含以下属性： name: 指令名，不包括 v- 前缀 |
| Vnode |
当前节点信息 |
v2的自定义指令钩子函数
| bind | 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 |
| inserted |
被绑定元素插入父节点时调用 |
| update |
所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前 |
| componentUpdated |
指令所在组件的 VNode 及其子 VNode 全部更新后调用 |
| unbind |
只调用一次，指令与元素解绑时调用 |
v3的自定义指令钩子函数
| created |
创建后调用 |
| beforeMount |
自定义指令绑定到 DOM 后调用. 只调用一次 |
| mounted |
自定义指令所在DOM, 插入到父 DOM 后调用 |
| beforeUpdate |
自定义指令所在 DOM, 更新之前调用 |
| updated |
组件VNode 和子VNode 更新后执行 |
| beforeUnmount |
销毁前 |
| unmounted |
销毁后 |
使用场景
输入框自动聚焦
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
<input v-focus>
相对时间的转换 例：5分钟前
<span v-relativeTime="time"></span>
new Vue({
el: '#app',
data: {
time: 1565753400000
}
})
Vue.directive('relativeTime', {
bind(el, binding) {
// Time.getFormatTime() 方法，自行补充
el.innerHTML = Time.getFormatTime(binding.value)
el.__timeout__ = setInterval(() => {
el.innerHTML = Time.getFormatTime(binding.value)
}, 6000)
},
unbind(el) {
clearInterval(el.innerHTML)
delete el.__timeout__
}
})
传入一个颜色，自动为全局背景色
let app = createApp(App)
// 全局自定义指令
app.directive('color', {
created(el, binding) {
el.style.background = binding.value;
},
updated(el, binding) {
el.style.background = binding.value;
}
})vue中的修改符
事件修饰符
| .stop | 阻止事件冒泡 |
| .capture |
触发事件捕获 |
| .self |
当事件作用在元素本身时才会触发 |
| .once |
只触发一次 |
| .prevent |
阻止默认事件 |
| ·passive |
告诉浏览器你不想阻止事件的默认行为 |
| ·trim |
自动过滤用户输入的首尾空格 |
v-model的修饰符
| .lazy | <input v-model.lazy="msg"> 转变为在change事件再同步 |
| .number | 用法同上 自动将用户的输入值转化为数值类型 |
| .trim | 用法同上 自动过滤用户输入的首尾空格 |
键盘事件修饰符，支持多个按键
| keyup.13 / enter | 点击回车键 |
| .delete | 删除或退格键 |
| .up .down .left .right | 上下左右按键 |
| @keydown.ctrl.13 | 同时按下Ctrl + enter时触发 |
element或子组件的修饰符
对于组件库与子组件来说，都是封装好的事件，书写事件将会成为一个子传父
使用 @click.native ，可以解决这个问题
vue的生命周期
| beforeCreate |
实例创建前，目前只有一些实例本身的事件和生命周期函数,无法拿到dom和data数据 |
| created |
实例创建后，是最早可以使用data和methods中数据的钩子函数。仍然无法拿到dom |
| beforeMount |
在created与beforeMount之间，是用来形成虚拟dom DOM挂载前，但挂载的是之前的虚拟dom |
| mounted |
DOM挂载后，在此刻dom渲染完毕，页面和内存的数据已经同步，最早的可以获取DOM结构的位置 |
| beforeUptate |
更新前，当data的数据被渲染在DOM上，并且发生改变才会执行这个钩子函数 |
| updated |
更新后，在此刻内存和页面都是最新的 |
| beforeDestroy |
销毁前，即将销毁data和methods中的数据，但再此时还是可以使用的，可以做一些释放内存的操作，同时也是最后可以获取实例与dom的钩子函数 |
| destroyed |
已经销毁完毕 |
| activated |
被包含在 keep-alive 中创建的组件才会有这个钩子，组件激活时触发 |
| deactivated |
被包含在 keep-alive 中创建的组件才会有这个钩子，组件失活时触发 |
vue中的watch
watch,数据监听，用于监听数据变化，当对应数据变化时触发
应用场景
watch{
str:{
handler(newVal){}, //引用数据类型的新旧值是一致的，所以是只有一个新数据就可
deep:ture, //是否深度监听
immediate:true //是否开启初始监听
}
}如果不需要开启深度监听与初始监听，可简写为
watch{
str(newVal){}
}computed,methods,watch的区别
computed是计算属性，对应数据变化，自动计算，需要return返出最终的值，拥有缓存，数据不变时，调用缓存
methods是vue中的事件与方法，需要手动调用才能触发
watch是数据监听，不需要return返回值，数据变化自动监听，可判别变化前后的差异
过滤器filter
过滤器是对 即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据，需要使用return返回最终的值
过滤器分为局部过滤器和全局过滤器，使用方法是在要过滤的数据后添加 |
keep-alive
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）
如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可。要缓存部分页面，需要在路由地址配置中，在meta属性中添加一个状态，在app.vue中判断一下包裹的router-view即可
v-for为什么要使用key
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点，如果不使用key的话，不影响正常的使用，但是会在控制台报警告
$nextTick()的作用
作用
$nextTick()是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
使用场景
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，因为在此时还拿不到dom节点
입력 박스라면 vue render() 함수가 virtual dom을 real dom으로 변환할 때 비동기식이어서 바로 얻을 수 없기 때문에 표시된 직후에 자동으로 포커스를 가져오도록 하는 것은 불가능합니다. time dom, 따라서 this.$nextTick() 을 사용 하고 내부에 포커스를 가져오는 코드를 작성하면 이 기능을 실현할 수 있습니다.
vue가 데이터를 수정한 후 페이지가 새로고침되지 않습니다.
<template>
<div>
<p v-for="(value,key) in item" :key="key">
{
{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>
</div>
</template>
<script>
export default {
data:()=>{
item:{
oldProperty:"旧值"
}
},
methods:{
addProperty(){
this.item.newProperty = "新值" // 为items添加新属性
console.log(this.items) // 输出带有newProperty的items
}
}
};
</script>
질문: 위와 동일하게 개체에 새 속성을 직접 추가하고 값을 할당할 때 콘솔에 최신 정보를 인쇄할 수 있지만 이 데이터를 뷰에 자동으로 업데이트할 수 없습니다.
이유: Vue2는 Object.defineProperty를 사용하여 데이터의 이중 항목 데이터 바인딩을 실현합니다.그는 모든 속성에 set 및 get을 추가 하고 이 새 속성에 새 속성을 추가하고 값을 할당하는 이 직접 작업은 집합이 아닌 경우입니다. 바운드, 집합을 트리거할 수 없으며 두 데이터 항목의 바인딩을 실현할 수 없습니다.
Vue는 이미 생성된 인스턴스에 새로운 반응형 속성을 동적으로 추가하는 것을 허용하지 않습니다.
해결책
1 Vue.$set()을 사용하여 적은 수의 속성을 추가하는 데 적합한 새 속성을 추가합니다.
this.$set(this.item, "newProperty", "张三");
2 Object.assign()을 사용 하여 새 객체를 생성하고 원본 객체와 많은 속성을 추가하는 데 적합한 새 속성을 포함하는 객체를 병합합니다.
this.item = Object.assign({},this.item,{newProperty:'新值'})3 $forceUpdate 강제로 새로고침하지만 권장되지 않음
this.item.newProperty = "新值"
this.$forceUpdate();