• Vue页面模板和render函数和生命周期

    页面模板和render函数
    Vue 对象构建时需要为对象指定页面构成结构，该构成结构称之为模板
    在基本构成 vue 对象时通过 mount(el) 指定 构成的页面模板，同时指定页面位置
    1 、模板属性 (template)
    Vue 实例添加 template 属性，可以独立定义页面构成模板
    template 构成的模板 最终会替换到 mount(el) 的指向位置
    示例 :
    StringDOM ： HTML 标签的字符串定义方式
    StringEl ： HTML 元素选择器

     // 单一职能原则 => 代码中一个定义只用于描述一个功能

            //             => 一个文件的代码组成只用于解决一类问题

            //      优点：文件功能独立相互关联引用，但互不干扰，可以快速替换和修改、可以快速复用

            //      缺点：调用链长，中途接收开发困难

            // vue的容器构建时，页面定义的代码不是最终呈现的DOM

            /*

            Vue实例添加 template 属性，可以独立定义页面构成模板

            vue容器构建步骤：

                1.读取容器代码结构 => template

                2.渲染代码结构为真实响应式DOM => render

                3.将真实响应式DOM写入到页面对应的位置进行展示 => mount(el)

            template 构成的模板 最终会替换到 mount(el) 指向元素的内容

            示例:

                Vue.createApp({,

                    template:StringDOM | StringEl

                }).mount("#app")

                + StringDOM：HTML标签的字符串定义方式

                + StringEl：HTML元素选择器

    1.  
      "app">
    2.         <h1>测试template优先级h1>
    3.

    • 2、模板渲染函数（render）

Vue 实例添加 render 属性函数，可以独立定义 JS 模板构成函数
render 构成的模板具有 == 最高优先权，
最终会替换到 mount(el) 的指向位置
== ，且 template 属性失效
示例 :
render 属性取值为一个函数，该函数返回构成的模板
Vue.h 为渲染函数， 该参数可用于以方法方式构建页面模板 
  1.   
    "app">
  2.  
  3.     <script>
  4.         // 1、提供页面结构 => template 
  5.         let htmlTemplate = `
  6.             
    msg:{{ msg }}
  7.             
  8.         `;
  9.         let data = {
  10.             msg:"测试msg"
  11.         }
  12.         
  13.         // 1.1 字符串到dom的转换
  14.         let domBox = document.createElement("div");
  15.         domBox.innerHTML = htmlTemplate;
  16.         // console.log(domBox);
  17.         let list = domBox.childNodes
  18.         console.log(list);
  19.         // JS 内存dom虚拟容器盒子
  20.         let tempBox = document.createDocumentFragment();
  21.         list.forEach(item=>{
  22.             // console.log(item,item.cloneNode(true));
  23.  
  24.             // 2、渲染节点  => render
  25.             //          递归函数 => vue的语法解析 => 响应式关联
  26.             let cloneNode = item.cloneNode(true)
  27.             let text = cloneNode.textContent;
  28.             let flag = text.match(/{{\s*([^\s]*)\s*}}/);
  29.             if(flag!=null){
  30.                 cloneNode.textContent = text.replace(/{{\s*([^\s]*)\s*}}/,data[flag[1]])
  31.             }
  32.             tempBox.appendChild( cloneNode )
  33.         })
  34.  
  35.         // 3、把转换的DOM节点渲染到页面  => mount(el)
  36.         let htmlBox = document.querySelector("#app")
  37.         // console.log(htmlBox);
  38.         htmlBox.appendChild(tempBox)
  39.     script>

3、虚拟DOM

Vue . createApp ({,
template : StringDOM | StringEl
}). mount ( "#app" )
Vue . createApp ({
data :{
title : " 标题 "
},
render : function () {
return Vue . h ( 'h4' , 'render' + this . title );
}
}). mount ( "#app" ) Vue 引入了虚拟 DOM 和 DIFF 算法提示渲染性能
虚拟 DOM 的存在就是为了提高程序运行性能；
虚拟 DOM 实际就是一个存在于内存中的数据对象，可以用于描述一个 DOM
结构
浏览器对于 DOM 元素的直接操作效率较低，但对于 JS 的内存数据操作效率较
高
浏览器对于 DOM 的操作是非智能操作，每一次的调用都会重新渲染该 DOM
对象 ( 回流、重绘 )
JS 数据变量的赋值，可以有效确定值是否真的发生了变化，如果是才会修改
内存结果
diff 算法
内存中的数据变量发生变化，页面 DOM 元素需要进行更新 
  2.     <div id="app">
  3.  
  4.     div>
  5.  
  6.     <script type="module">
  7.         import { createApp,h,createVNode } from "../assets/vue/3.0/vue.esm-browser.js";
  8.         createApp({
  9.             data(){
  10.                 return {
  11.                     msg:"测试MSG变量关联"
  12.                 }
  13.             },
  14.             render(vm) {
  15.                 console.log(vm,this);
  16.                 // console.log(h);
  17.                 // h 是vue在render函数中提供的用于完成响应式关联的DOM构建工具
  18.                 // return "
    测试数据
    "
  19.                 // return h("h4","render函数模板:"+vm.msg)
  20.                 return h("div",[
  21.                     "容器",
  22.                     h("h4","render函数模板:"+vm.msg),
  23.                     h("input",{ type:"text",value:vm.msg,onInput:(event)=>{ vm.msg = event.target.value } })
  24.                 ])
  25.             },
  26.         }).mount("#app")
  27.     script>

 

 

生命周期 生命周期：一段代码从 创建 到 销毁的 完成过程
钩子函数 : Vue 对外提供的在一些特点代码执行段上的回调函数
Vue . createApp ({
// 在实例初始化之后，数据观测 和 事件配置之前被调用。
beforeCreate : function (){},
// 在实例创建完成后被立即调用
created : function (){},
// 在挂载开始之前被调用：相关的 render 函数首次被调用。
beforeMount : function (){},
// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
mounted : function (){},
// 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现
有的 DOM
beforeUpdate : function (){},
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
updated : function (){},
// 实例销毁之前调用。在这一步，实例仍然完全可用。
beforeUnmount : function (){},
// Vue 实例销毁后调用。调用后， Vue 实例指示的所有东西都会解绑定，所有
的事件监听器会被移除
unmounted : function (){},
// 特殊生命周期监听函数
renderTracked : function ({ key , target , type }) {},
renderTriggered : function ({ key , target , type }) {},
});
生命周期流程 

  1.   
    "app">
  2.         
  3.             
    msg:{{ msg }}
  4.             
  5.             
    info:{{ info }}
  6.             
  7.             

  8.             
  9.         
    1.  
      "app">
    2.         <div class="swiper-container" ref="loop">
    3.             <div class="swiper-wrapper">
    4.                 <div class="swiper-slide">slider1div>
    5.                 <div class="swiper-slide">slider2div>
    6.                 <div class="swiper-slide">slider3div>
    7.             div>
    8.         div>
    9.         
    10.         <pre>请求结果:{{ result }}pre>
    11.
  • <script type="module">
  • import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
  • createApp({
  • data(){
  • return {
  • result:{}
  • }
  • },
  • methods: {
  • initSwiper(){
  • new Swiper(this.$refs.loop, {
  • autoplay: 5000,//可选选项，自动滑动
  • })
  • },
  • loadInitData(){
  • axios.get("http://127.0.0.1:3000/public/user")
  • .then(( response )=>{
  • console.log( response.data );
  • this.result = response.data
  • })
  • .catch(()=>{
  • alert("请求失败")
  • })
  • }
  • },
  • created() {
  • this.loadInitData();
  • },
  • mounted() {
  • // 不要在生命周期构子函数中定义大量的逻辑执行代码
  • // 以方法方式分解功能，通过实例进行调用
  • // new Swiper(this.$refs.loop, {
  • // autoplay: 5000,//可选选项，自动滑动
  • // })
  • // this.loadInitData();
  • this.initSwiper();
  • },
  • }).mount("#app")
  • script>

  • 相关阅读:
    【视觉基础篇】17 # 如何使用后期处理通道增强图像效果？
    功率放大器在超声导波中的应用有哪些
    （论文阅读46-50）图像描述2
    Parade Series
    微信小程序开发实战7 小程序订阅消息
    MyBatis的映射器语法
    [java进阶]——方法引用改写Lambda表达式
    每日一题 1155. 掷骰子等于目标和的方法数（中等，动态规划，前缀和）
    Chapter4.5：根轨迹法考研参考题
    Python爬取网页源代码（自用）
  • 原文地址：https://blog.csdn.net/m0_62168050/article/details/126839646