오늘 인터뷰에서 몇가지 질문이 나왔는데요, 중요한 내용은 적어두었고 나중에 보충하도록 하겠습니다!
1. vue의 render 함수와 templatet의 차이점은 무엇인가요?
템플릿을 사용한 렌더링----html
render----js 렌더링 방법
Render(제공)는 컴파일 방식으로, render에 h라는 함수가 있는데, h의 함수는 단일 파일 컴포넌트에 대한 가상 DOM을 생성한 뒤, 이를 render를 통해 파싱하는 것이다.
h는 createElement() 메서드입니다. createElement(태그 이름, 속성 구성, 하위)
템플릿도 컴파일 방법이지만 템플릿은 결국 렌더를 통해 다시 컴파일됩니다.
차이점:
- 렌더의 렌더링 방법은 createElement()를 통해 가상 Dom을 생성하는 것으로, 이는 매우 논리적이고 복잡한 컴포넌트 캡슐화에 적합합니다.
- Templet은 구성 요소 캡슐화를 위한 HTML과 유사한 템플릿 클래스입니다.
- 렌더 성능은 템플렛보다 뛰어납니다.
- 렌더링의 우선순위는 템플렛보다 높습니다.
2. Vue 데이터가 변경될 때 뷰가 실시간으로 업데이트되지 않는 문제를 해결하는 방법은 무엇입니까?
$set()를 사용하거나 Object.sign()을 사용하여 새 객체를 생성하여 해결할 수 있습니다.
3. const, let, var의 차이점
- const는 상수입니다. 정의된 변수는 수정할 수 없으며 초기화해야 합니다. 변수 승격이 없습니다.
- let 선언은 블록 수준 범위에서만 유효하며 변수 승격이 없으며 한 번 선언하면 동일한 범위에서 다시 선언할 수 없습니다.
- var 선언은 전역 범위에서 유효하며 변수 승격이 있으며 반복적으로 선언할 수 있습니다.
4. localStorage, sessionStorage 및 쿠키의 차이점
1) 저장 크기
쿠키: 일반적으로 4K 이하(각 http 요청은 쿠키를 전달하므로 쿠키는 세션 식별자와 같은 아주 작은 데이터를 저장하는 데에만 적합합니다.)
sessionStorage: 5M 이상
localStorage: 5M 이상
2) 데이터 유효기간
쿠키 : 일반적으로 서버에 의해 생성되며 만료시간을 설정할 수 있으며, 시간을 설정하지 않을 경우 브라우저를 닫을 때 쿠키가 만료되며, 시간이 설정되면 쿠키는 하드디스크에 저장되며 만료됩니다. 만료된 후.
sessionStorage: 현재 브라우저 창이 닫힐 때까지만 유효합니다. 페이지가 닫히거나 브라우저가 지워집니다.
localStorage: 영구적으로 유효하며, 수동으로 영구적으로 지우지 않는 한 창이나 브라우저를 닫을 때 저장되므로 영구 데이터로 사용됩니다.
3) 범위
쿠키: 모든 원본 창에서 공유됨
sessionStorage: 동일한 브라우저 창에서 공유됩니다. (다른 브라우저, 동일한 페이지는 공유되지 않습니다.)
localStorage: 모든 원본 창에서 공유됨
4) 통신
ccokie: 동일한 출처의 http 요청에는 10가지 유형이 전달됩니다. 필요하지 않더라도 쿠키는 브라우저와 서버 사이를 오가며 전달됩니다. 쿠키를 사용하여 너무 많은 데이터를 저장하면 성능이 저하될 수 있습니다. 문제.
sessionStorage: 클라이언트(예: 브라우저)에만 저장되며 서버와의 통신에 참여하지 않으며 자동으로 서버에 데이터를 보내지 않고 로컬에만 저장됩니다.
localStorage: 클라이언트(예: 브라우저)에만 저장되며 서버와의 통신에 참여하지 않습니다. 자동으로 서버에 데이터를 보내지 않고 로컬에만 저장됩니다.
5) 사용의 용이성
쿠키: 직접 캡슐화해야 합니다. 기본 쿠키 인터페이스는 충분히 친숙하지 않습니다.
sessionStorage: 기본 인터페이스가 허용되며 객체 및 배열에 대한 더 나은 지원을 제공하기 위해 캡슐화될 수 있습니다.
localStorage: 기본 인터페이스가 허용되며 객체 및 배열에 대한 더 나은 지원을 제공하기 위해 캡슐화될 수 있습니다.
sessionStorage의 개념은 매우 특별합니다. "브라우저 창"이라는 개념을 도입합니다. SessionStorage는 항상 동일한 소스의 동일한 창에 존재하는 데이터입니다. 즉, 브라우저 창이 닫히지 않는 한, 심지어 페이지를 새로 고치거나 동일한 소스를 입력하면 다른 페이지에 데이터가 여전히 존재합니다. 창을 닫은 후 sessionStorage가 소멸됩니다. 동시에 같은 페이지에서도 다른 창이 "독립적으로" 열립니다. 다른 sessionStorage 개체가 있습니다.
세션과 쿠키의 차이점을 보완합니다.
쿠키와 세션은 모두 브라우저 사용자의 신원을 추적하는 데 사용되는 세션 방법입니다.
- 쿠키는 클라이언트 측에 저장되고 세션은 서버 측에 저장됩니다.
- 쿠키는 그다지 안전하지 않습니다. 다른 사람들이 로컬에 저장된 쿠키를 분석하여 쿠키를 스푸핑할 수 있습니다. 보안상의 이유로 세션을 사용해야 합니다.
- 해당 세션은 일정시간 동안 서버에 저장되며 접속자가 많아지면 서버의 성능을 점유하게 되므로 서버의 성능을 저하시키기 위해서는 쿠키를 사용하여야 합니다.
- 세션에 저장되는 것은 객체이고, 쿠키에 저장되는 것은 문자열입니다.
- 쿠키는 사용자가 웹사이트에 로그인했는지 여부를 확인하여 다음에 로그인할 때 자동으로 로그인(또는 비밀번호를 기억)할 수 있도록 하는 데 사용됩니다. 쿠키를 삭제하는 경우 로그인할 때마다 해당 로그인 정보를 다시 입력해야 합니다.
- Session은 각 사용자의 개인 정보를 저장하는 데 사용되며, 변수의 값은 서버 측에 저장되며, SessionID를 통해 고객별로 구분됩니다.
5. css@import와 링크의 차이점
- Affiliation: link는 HTML의 태그로 CSS 파일을 로드할 수 있을 뿐만 아니라 RSS, rel 연결 속성 등을 정의할 수 있으며, @import는 CSS의 구문으로 스타일 시트를 가져오는 기능만 갖습니다.
- 로딩 순서: 페이지가 로딩되면 링크와 html이 동시에 로딩되며, @import에 의해 도입된 CSS는 페이지가 로딩된 후에 로딩됩니다.
- 호환성: @import는 CSS2.1에서만 사용할 수 있는 구문이므로 IE5 이상에서만 인식 가능하며, link는 HTML 태그이므로 호환성 문제가 없습니다.
- DOM: JavaScript는 링크 태그에 의해 도입된 스타일을 변경하기 위해 dom을 제어할 수 있지만 @import 스타일은 dom에 의해 제어될 수 없습니다.
- 링크 스타일 스타일의 가중치가 @import의 가중치보다 높습니다.
6. Vue의 데이터가 함수여야 하는 이유
Object는 참조 데이터 유형으로 주소를 가리킵니다. 각 구성 요소의 데이터 메모리는 동일한 주소입니다. 한 구성 요소의 데이터 속성이 변경되면 다른 구성 요소의 데이터 속성도 그에 따라 변경됩니다.
함수에는 자체 범위가 있으며 데이터를 초기화할 수 있습니다. 각 데이터 속성은 독립적이며 서로 영향을 미치지 않습니다.
7. 참조 데이터 유형과 기본 데이터 유형의 차이점
기본 데이터 유형은 값에 액세스하고 해당 값은 변경할 수 없으며 해당 변수는 스택에 저장됩니다.
참조 데이터 유형은 고유한 속성과 메소드를 가질 수 있으며 그 값은 가변적이며 그 값은 스택 메모리와 힙 메모리 모두에 저장되는 객체입니다.
8. 객체의 속성과 메소드를 고정하는 방법
객체.동결(obj)
9. es6 배열을 사용하여 중복 제거
//方法一
function unique1(arr){
return arr.reduce(function(prev,next){
prev.indexOf(next)===-1&&prev.push(next)
return prev
},[])
}
//方法二
function unique2(arr){
return arr.filter(function(item,index,arr){
return arr.indexOf(item)===index
})
}
//方法三
function unique3(arr){
return Array.from(new Set(arr))
}10. URL을 입력할 때 브라우저는 어떤 과정을 거치나요?
- DNS 도메인 이름 확인
- TCP 연결 설정(3방향 핸드셰이크)
- http 요청 보내기 및 http 요청에 응답
- 브라우저가 페이지를 구문 분석하고 렌더링합니다.
- TCP 연결 끊기(4번 웨이브)