vue-1 vue introduction:

The principle of two-way data binding between vue2 and vue3 is different:

2.0's responsiveness is based on the set and get methods in ES6's Object.defineProperty , which can monitor changes in data objects, but cannot monitor additions and deletions of object properties, changes in array elements and lengths, and will be initialized in Vue. The Observer (observer) has been established to observe the changes of the properties of the data object.

When implementing responsiveness for vue, the situation where the array api cannot be monitored is realized by rewriting some methods of the array, but only limited to the following 7 methods

How to trigger automatic updates
- 1. (7 methods to change the original data type) push, pop, splice, unshift, shift, sort, reverse
- 1. Solution (updated): Overwrite the array in data

 Object.defineProperty(劫持的对象, '监听的属性', {
  get: function() {
    // 访问了被监听的对象的属性时触发
  },
  set: function(newVal) {
    // 修改了被监听的对象的属性时触发
  }

The 3.0 response uses ES6 Proxy instead of Object.defineProperty , which can monitor the addition and deletion of object properties and the modification of array elements and lengths, and also implements lazy monitoring (lazy observation) (not created during initialization) All Observers will only listen when they are used) However, although mainstream browsers support Proxy

 let newModel = new Proxy(代理的对象, {
  get: function(target, key) {
    // 访问了对象的属性时触发
  },
  set: function(target, key, newVal) {
    // 修改了对象的任意属性时触发
  }
})

Vue3: better support for ts, faster speed, reduced size, easier maintenance, closer to native, easier to use, faster speed

When implementing responsiveness for vue, the situation where the array api cannot be monitored is realized by rewriting some methods of the array, but only limited to the following 7 methods

What is vue?

Vue is a javascript framework for building user interfaces
Vue is a progressive MVVM framework developed incrementally from the bottom up
- Progressive: that is, vue will do its own management functions and will not affect other unmanaged areas, so vue can be well combined with third-party plug-ins
- Incremental: first complete the basic functions of the project for development and then use various advanced vue plug-ins to complete complex functions
Installation - vue-devtools learning, a necessary tool for debugging vue - official provision: csdn has written

MVVM

M：model
- Model: store data, data
V：view
- View: the interface that the user can see
VM：viewModel
- View model: It is the bridge between the associated view and the model, used for data transfer between the data layer and the view layer (two-way binding)

MVC

MVC is an abbreviation of Model-View-Controller, and MVVM is an abbreviation of Model-View-ViewModel.
In MVC, the controller (Controller) acts as an intermediary, responsible for processing user requests and updating the relationship between the model (Model) and the view (View); in MVVM, the view model (ViewModel) plays such a role .
In MVC, the view (View) usually obtains data directly from the model (Model) and displays it; while in MVVM, the view (View) obtains data and displays it through the view model (ViewModel).

MVP

The difference between vite and webpack

v3 uses vue/cli scaffolding (essentially helps us package webpack to help us build and compile projects)

Advantages of Vite: fast cold start, fast operation, hot update, fast packaging, simple configuration

For small projects and beginners, Vite can be considered because it can quickly start the development environment, reduce waiting time, and allow developers to iterate and test code faster. For large-scale projects and projects with high requirements on build performance, you can choose Webpack, because it can support various complex build scenarios, and can optimize build performance through various plug-ins and loaders.

1. The vite development server starts faster than webpack (fast cold start)
webpack will package first, then start the development server, and directly give the packaging result when requesting the server.
Vite does not need to be packaged when starting the development server, which means that there is no need to analyze module dependencies and no compilation, so the startup speed is very fast. When the browser requests a module, the module content is compiled as needed. This method of on-demand dynamic compilation greatly reduces the compilation time. The more complex the project and the more modules, the more obvious the advantages of vite.
2. Vite hot update (modified code is automatically compiled)
is faster . When a module is changed, vite only needs to ask the browser to request the module again, unlike webpack, which needs to compile all related dependent modules of the module once. higher efficiency.
3.vite builds fast, 10-100 times faster than webpack's nodejs.

Disadvantages of Vite:
1. The ecology is not as good as webpack, and the loader and plugins are not rich enough.
2. The development browser of the project must support ES Module, and cannot recognize CommonJS syntax

Download and install vue: npm yarn installation for learning grammar

First init -y to create a package.json file: then download vue

npm i [email protected]

npm i [email protected]

data: two creation methods

Vue2: object type (2 normal use): el: "property name", normal property mount.$mount() method.

    <!-- 1.创建视图层 -->
    <div id="demo">
        {
   
   {text}}
    </div>

    <script>
        // 2.创建vm层，就是vue实例
        let app = new Vue({
            // //关联视图：el:'demo'
            // el: '#demo'
            // // 3.创建模型数据
            // data:{
            //     text: '今天是个好日子',
            // }
            data(){
                return{
                    text: '我很开心'
                }
            }
        })
        // 关联视图，挂载方式
        app.$mount('#demo')
    </script>

vue3: Functional style (both 2 and 3 can be used, recommended)

   <!-- 在vue3中创建，要使用createApp()方法来进行创建 -->
    <!-- 1.创建视图层 -->

    <div id="demo">{
   
   {text}}</div>

    <script>
        // 2.创建VM层，就是vue实例
        Vue.createApp({
            // 3.创建模型数据
            data(){
                return {
                    text: '我是vue3创建的'
                }
            }
        })
        //关联视图
        .mount("#demo")
    </script>

Why data is a function instead of an object: (recommended functional style)

If it is an object, when the component is reused multiple times, data sharing will occur. If the data of one component is changed, the data of other components will also be affected, resulting in data pollution.

If it is a function, use the component once, call data() once, generate different objects, and the data between each other will not be affected

Therefore: the component instance object data must be a function, the purpose is to prevent multiple component instance objects from sharing one data, resulting in data pollution. In the form of a function, it will be used as a factory function when initializing data and will return a new data object

CSS style pollution: the scoped attribute on the style tag is used for style isolation, which means that the current style only takes effect for the current component