To summarize Vue's common APIs that are required for interview

Vite 2021-02-23 16:12:26
summarize vue common apis required


Write it at the front

Vue overall situation api And examples api quite a lot , A lot will be forgotten in the corner , It's hard to remember documents if you're not familiar with them . But these api It is also necessary for daily development , And in the interview time often test must test . So here's a summary , In fact, to understand these api Can expand a lot of knowledge . Of course, there won't be too many knowledge points about design extension .

Notice that a lot of things actually have on the document , But reading documents is boring , Especially beginners , And a lot of things in the document are more secretive 、 Astringent

Data related api

Vue Why do you need these two api Well ? This is mainly related to Vue The response principle of . When creating a Vue At instance time ,Vue Will model Layer data is processed responsively , Listening to data set&get, To update the view in the future . But often, we may need to add or delete some properties at some point in the future , At this time, we expect the view to change as well . If we simply assign values to instance properties / Delete operation , So when initializing an instance , This property has not experienced responsive processing , Obviously Vue It won't help us to update the view automatically , So in order to achieve this scenario , It provides users with these two api, It's not just static methods Vue.set & Vue.delete, Every Vue Examples also have corresponding instance methods vm.$set & vm.$delete

  • Vue.set Add a property, And make sure this new property It's also responsive , And trigger view update .
  • Vue.delete Delete object's property. If the object is responsive , Make sure the deletion triggers the update view .
<div id="app">
<p>{{message}}</p>
<p> full name :{{info.name}}</p>
<p v-show="info.age"> Age :{{info.age}}</p>
<p v-if="info.sex"> Gender :{{info.sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "hello",
info: {
name: "tom",
sex: " male ",
},
},
});
setTimeout(() => {
Vue.set(vm.info, "age", 12);
Vue.delete(vm.info, "sex");
}, 3000);
</script>
 Copy code 

Event correlation api

stay Vue The tutorial section of the documentation may only mention $emit as well as v-on These things related to events . But many times, for example, we need to do cross component communication , I remember just getting in touch with Vue The community is full of a lot of bus Bus mechanism , Often at this time, you still need to implement message subscription and publishing by yourself . actually Vue Has provided such capabilities , There are mainly the following api

Pay attention to these api All are Vue Example of

  • $on The binding event
  • $emit Triggering event
  • $once Bind only once , Remove when triggered
  • $off Unbind event , Note that the parameters of this method are a little interesting
    • If no parameters are provided , Remove all event listeners ;
    • If only events are provided , Then remove all listeners of the event ;
    • If both events and callbacks are provided , Only remove the listener of this callback .
<script>
// test $on & $emit
const vm1 = new Vue({})
vm1.$on('hello-world',function(msg){
console.log(msg);
})
vm1.$emit('hello-world','hello china',)
// test $once
const vm2 = new Vue;
vm2.$once('test-once',function(){
console.log('abc');
})
vm2.$emit('test-once')
vm2.$emit('test-once')
// test $off
const vm3 = new Vue;
vm3.$on('off1',function(){
console.log(123);
})
vm3.$on('off2',function(){
console.log(456);
})
// Don't pass parameters 
vm3.$off()
vm3.$emit('off1')
vm3.$emit('off2')
vm3.$on('off3',function(){
console.log(789);
})
vm3.$on('off4',function(){
console.log(101112);
})
// Only one event name 
vm3.$off('off3')
vm3.$emit('off3')
vm3.$emit('off4')
// Send the event name and Callback function 
function off5(){
console.log('off5');
}
function off6(){
console.log('off6');
}
vm3.$on('off5',off5)
vm3.$on('off5',off6)
vm3.$off('off5',off6)
vm3.$emit('off5')
</script>
 Copy code 

be familiar with jQuery My classmates should be surprised ~~

ref & nextTick

These are both Vue It's something that's often tested in interviews , especially nextTick It's going to stretch out Vue Of Asynchronous update queue ; and ref Another form of component communication . So it's very necessary to explain

Let's put it simply :

  • ref Is an attribute , Can act on the original DOM, here ref It points to DOM Elements ; It can also act on custom components , here ref Points to component instances . Of course, in the end ref Will be attributed to his parent component instance $refs Attribute .

  • nextTick And what is it ? It actually puts the callback function into an array , And then by demoting ( Support promise Just use promise, Otherwise, use meta timer ) In the form of , When the data changes , After the view is updated asynchronously , This callback function will execute .

Examples are as follows :

<div id="app">
<p ref="p1">hello vue</p>
<v-message ref="message"></v-message>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<button @click="addList">addList</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
Vue.component("v-message", {
template: `<div>this is message comopnents</div>`,
methods: {
say() {
console.log("hello");
},
},
});
const vm = new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4, 5, 6],
},
methods: {
addList() {
this.list.push(Math.random());
console.log(document.getElementsByTagName("li").length);
this.$nextTick(function() {
console.log(document.getElementsByTagName("li").length);
});
},
},
});
console.log(vm.$refs.p1.innerHTML);
console.log(vm.$refs.message);
vm.$refs.message.say();
</script>
 Copy code 

Last

Through the summary of these common test Vue necessary api, Hope to help you who are looking for a job ~~, In addition, we hope to make progress together , If you don't have to go through the documents . In fact, many knowledge points are hidden in the document .

  • Reference resources

vue.js

vue api

nextTick

版权声明
本文为[Vite]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223155148655i.html

  1. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  2. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  3. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  4. 前端面试常考题:JS垃圾回收机制
  5. Frequently asked questions in front end interview: JS garbage collection mechanism
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. Java之HTTP网络编程(一):TCP/SSL网页下载
  8. HTTP network programming in Java (1): TCP / SSL web page download
  9. Java之HTTP网络编程(一):TCP/SSL网页下载
  10. HTTP network programming in Java (1): TCP / SSL web page download
  11. 使用vite搭建vue项目
  12. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  13. 在 vue 中通过 express 连接数据库
  14. Using vite to build Vue project
  15. Display PDF file in component: Vue pdf
  16. Connecting database through express in Vue
  17. 2021届秋招哈啰出行前端面经(一面)
  18. vue使用sdk进行七牛云上传
  19. Javascript性能优化【内联缓存】 V8引擎特性
  20. Small true wireless smart headset evaluation: put intelligence into the ear
  21. The front end experience of the 2021 autumn recruitment
  22. Vue uses SDK to upload Qi Niu cloud
  23. 深入理解 Web 协议 (三):HTTP 2
  24. dhtmlxGantt如何重新排序任务
  25. JavaScript performance optimization [inline cache] V8 engine features
  26. 深入理解 Web 协议 (三):HTTP 2
  27. Deep understanding of Web protocol (3): http 2
  28. 深入理解 Web 协议 (三):HTTP 2
  29. How dhtmlxgantt reorders tasks
  30. 深入理解 Web 协议 (三):HTTP 2
  31. JavaScriptBOM操作
  32. JavaScriptBOM操作
  33. Deep understanding of Web protocol (3): http 2
  34. Deep understanding of Web protocol (3): http 2
  35. dhtmlxGantt甘特图重新排序任视频教程
  36. vue实现七牛云上传图片功能
  37. vue.js环境配置步骤及npm run dev报错解决方案
  38. Deep understanding of Web protocol (3): http 2
  39. JavaScript BOM operation
  40. JavaScript BOM operation
  41. Dhtmlxgantt reordering video tutorial
  42. Vue to achieve seven cattle cloud upload image function
  43. vue.js Environment configuration steps and NPM run dev error reporting solution
  44. 什么是HTTPS以及如何实施HTTPS?
  45. vue使用sdk进行七牛上传
  46. JavaScript 邮箱验证 - 正则验证
  47. Codeless development platform cloud watch sets off a "new revolution" in enterprise Digitalization
  48. Codeless development of cloud watch for enterprise digital solution
  49. What is HTTPS and how to implement it?
  50. Vue uses SDK to upload seven cows
  51. JavaScript mailbox verification - regular verification
  52. JavaScriptBOM操作
  53. JavaScript BOM operation
  54. How to create a new NPM package and publish it to the NPM community
  55. vue --tinymce 解决上传图片的方法
  56. Vue development
  57. A simple solution for vite to batch introduce SVG symbol
  58. Building 3D rendering engine from scratch with JS (2)
  59. Vue -- tinymece solution to upload pictures
  60. Common configuration of nginx