------------------------------------------
{ {function call}}, computed, watch
{ {function call}} It will be called when the page starts to load, and it will also be called when any data in the page changes. Once the page is re-rendered, the function will load again unless there is a specific need. , generally do not use
computed. Calculated values are generated based on existing values. When the value of a dependency changes, the result changes. Generally use this.
watch monitors whether a value changes. Simple values are directly monitored, and complex values require in-depth monitoring (data types such as arrays and js objects)
Difference: the function call is called when any data in the page changes, and the calculation is called only when the dependent value changes.
You cannot write asynchronously in computed, but you can write asynchronously in watch.
How to use it at work, use computed in most cases. In the case of asynchronous use of watch, as long as any data changes, it must be recalculated, using function calls
-----------------------
class
:class="['div1','div2']"
Variation: class="[a,b]"
a:'div1',
b:'div2'
:class="[true?'div1':'',true?'div2':'']"
:class="{div1:true,div2:true}"
style
:style="{style name: variable}"
instance of vue
const vm=new Vue({
the:'#app'
data:{a:1}
methods:{show(){}}
})
vm.$el
vm.$data
vm.data
vm.method
interview questions
Vue is a progressive javascript, data-centric, mvvm framework
mvc-mvp-mvvm These have many variants.
This is an architectural idea. Can be used in overall projects. It can also be used alone in front-end or back-end
life cycle hook function
The process of life cycle vm object from initialization to destruction
Hook function In each important stage of the object, the function that needs to be executed is the hook function
before creation
Just new, nothing has been executed $el and $data are undefined
after creation
The $el container has not been found yet, but the data is bound first
before mount
just found the container
after mount
Replace the data in the container with the data in new.
before update
Updated
before destruction
after destruction
plug-in
Do a certain function alone. Help complete a small function of the project
module
Reusable functions A module is a js file
components
A single block composed of html+css+js
Component-based development divides a project into multiple small pieces of html+css+js. the whole project is made up of multiple small pieces
As large as an item, as small as a button, it can be called a component.
spa development model
single page application single page application
Better maintenance and strong reusability
Component Definition
global component
To be defined in front of new, as long as it is defined, it can be used anywhere
Vue.component('component name',{})
local components
only for topical use
components:{
Component name: {}
}
Component usage
<component name></component name>
Precautions for use
1. There must be a root tag in the component
2. Component type can be reused
3. It is no problem to use the single-label component alone, but it is problematic to use it with others
4. There are actually all the functions of Vue in the component data, methods, watch, computed, and life cycle
Why is the data in the component different from the data in new Vue? is a function return{}
Because if all components use {}, the same data name will conflict and pollute. Use functions to put {} to put data in different scopes. Data in different scopes do not affect each other.
What is the two-way binding of data?
In Vue, the two-way binding of data is to use data hijacking combined with the method of publisher-subscriber mode, call Object.defineProperty() to hijack the setter and getter of each property, and when the data changes Publish information to subscribers. Trigger the corresponding listener callback.
What is scaffolding?
A tool for quickly building VUE projects, which can automatically generate project templates for VUE and webpack, and can automatically install the plugins required by VUE, avoiding manual installation of various plugins
What is the difference between VUE's modular import and export and NODE's?
The main difference is that the module systems they use are different. The
import and export ES6 module system in VUE is static import and export, which supports named
import
export/ export default
NODE is the COMMON.js module system, which is dynamically loaded and needs to be parsed and executed at runtime.
The export module.exports and exports
require methods have two functions:
1. Load the file module and execute the code inside
2. Get the interface object exported by the loaded file module
what is the socket for
In VUE, sockets are a mechanism for component communication. It allows parent components to pass content to child components without hardcoding in child components. Slots can be used to pass HTML, text, components, or any other type of content. In the parent component, you can use the <slot> tag to define the slot, and in the child component, you can use the <slot> tag to refer to the slot. By using slots, components can be made more flexible and reusable because they can accept different types of content and can be used in different contexts.
, Why does v-for need to add a key, what is the use, and what is recommended as a key
Guarantee the uniqueness of each piece of data, and retrieve data more quickly in DIFF operations. It is recommended to use ID or ID number as a unique identifier. If Index is used as the KEY, it will cause us to add and delete data in reverse order, etc., which will cause unnecessary real DOM updates. Although there is no problem with interface rendering, our efficiency will be very low. Moreover, there is an input-type DOM in our structure, which will cause wrong DOM updates and interface problems.
4. What does the filter do
Filter the data that meets the conditions,