Vue.js基础与生命周期详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38550182/article/details/114004566

一、vue基础结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>render</title>
</head>
<body>
    <div id="app">
        <p>公司名称：{{ company.name }}</p>
        <p>公司地址：{{ company.address }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    // VUE内部会把data中的数据填充到el指向的模板中
    // 并把模板渲染到浏览器
        new Vue({
            el: '#app', 
            data: {
                company: {
                    name: '拉勾',
                    address: '中关村创业大街籍海楼4层'
                }
            }
        })
    </script>
</body>

</html>

效果同上
使用vuecli脚手架创建的结构跟这段代码一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>render</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            data: {
                company: {
                    name: '拉勾',
                    address: '中关村创业大街籍海楼4层'
                }
            },
            //参数 h函数的作用是创建虚拟DOM,render方法把创建的虚拟DOM返回
            render(h) {
                return h('div', [
                    h('p', '公司名称：' + this.company.name),
                    h('p', '公司地址：' + this.company.address)
                ])
            }
        }).$mount('#app')
        // $mount方法作用是把虚拟DOM转换成真实DOM渲染到浏览器
    </script>
</body>

</html>

二、Vue声明周期
https://cn.vuejs.org/v2/guide/instance.html
创建Vue实例过程中
初始化事件和生命周期相关的成员，包括h函数
触发beforeCreate钩子函数
初始化注入，会把props、data、methods等成员注入到vue的实例上
触发created钩子函数，可以访问到上述成员。至此vue实例创建完毕

当我们把模板编译成render函数
首先判断选项中是否设置了el选项、没有设置就调用$mount(el)方法（该方法作用就是把el转换成template）
接下来要把模板编译成render函数
判断是否设置了template,如果没有设置会把el外层的html作为模板，然后把template模板编译到渲染函数（用来生成虚拟DOM）中

开始准备挂载DOM
首先触发beforeMount钩子函数，也就是挂载之前所执行的钩子函数，该函数中无法获取新元素的内容
再往下准备挂载DOM,接下来把新的结构渲染到页面上然后出发mounted钩子函数，该函数中可以访问到新的DOM结构的内容
挂载完成之后，修改data中的成员首先出发beforeUpdate钩子函数，然后再进行新旧两个虚拟DOM的对比，然后把差异重新渲染到浏览器中，最后触发updated钩子函数
最后是销毁阶段，当调用vm.$destory这个函数时首先触发beforeDestory钩子函数执行一些清理的工作，最后触发destroyed钩子函数

如果使用构造生成文件（例如构造单文件组件），模板编译将提前执行

如果使用单文件组件，模板编译是在打包或者构建的时候完成的，不在运行的时候处理模板编译的操作。vue始终推荐提前编译模板，这样性能会比较好、不需要在运行期间去编译模板
三、Vue语法与概念
1、插值表达式{{}},
如果内容中有html字符串，差值表达式会把内容解析为普通文本，html内容会被转义
如果想把内容作为html输出，可以使用v-html指令
2、指令
3、计算属性和侦听器
当模板中有太多的逻辑处理时，推荐使用计算属性，计算属性结果会被缓存，下次再访问该计算属性时会从缓存中获取相应结果提高性能
如果需要监听数据的变化，做一些比较复杂的操作例如异步操作或者开销比较大的操作可以使用侦听器
4、Class和Style绑定
5、条件渲染/列表渲染
6、表单输入绑定
7、组件
8、插槽，可以在自定义组件中挖一个坑，在使用这个组件的时候去填坑
9、插件如：vue-router、vuex
10、混入mixin 重用
11、深入响应式原理
12、不同构件版本的Vue，vue打包之后会生成不同版本的Vue，它支持不同的模块化方式以及带编译器和不带编译器版本的vue