首页 > 其他分享 >vue的理解

vue的理解

时间:2023-07-02 16:23:35浏览次数:34  
标签:vue DOM 渲染 number 编译 理解 let

vue是一个渐进式框架

声明式渲染 -> 组件系统 -> 客户端路由 -> 大规模状态管理 -> 构建工具

1、声明式框架

命令式与声明式区别

命令式关注过程

声明式关注结构

// 命令式
let number = [1,2,3];
let total = 0;
for (let i = 0; i < number.length; i++){
  total += number[i];
}

// 声明式
let total2 = number.reduce(function(memo, current) {
  return memo + current;
}, 0)

2、MVVM模式

MVC与MVVM

3、虚拟DOM

4、区分编译时(打包)和运行(浏览器)时

vue的渲染核心就是调用渲染(render)方法将虚拟DOM渲染成真实DOM(模版变函数),缺点是虚拟DOM编写麻烦。

专门写个编译时将模版译成虚拟DOM,在构建时进行编译性能更高,不再需要运行时进行编译。

5、组件化

高内聚、低耦合、单向数据流

大幅提升应用开发效率、测试性、复用性等;

降低更新范围,只重新渲染变化的组件;

标签:vue,DOM,渲染,number,编译,理解,let
From: https://www.cnblogs.com/marilol/p/17520910.html

相关文章

  • 【网约车】 网约车管理解决方案
     背景自2014年7月以来,一些互联网企业陆续推出网络预约出租汽车服务,对于满足社会公众多样化、差异性出行需求发挥了积极作用。面对新一代信息技术的发展与相关行业的快速发展,行业监管部门要顺应新技术和新应用的发展趋势,从促进产业发展和满足消费者不断变化的需求出发,创新监管方式......
  • Vue router-view key 导致路由切换非router-view部分也进行刷新
    <router-view> 组件是一个functional组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。 如果中最外层的<router-view>中增加了:key="$route.fullPath",会导致子路由中的router-view之外的部分也会被重新......
  • vue2 input和select无法正常回显
    背景:使用vue进行对象赋值,如果是一个未在data声明的属性,会导致双向绑定无法正常回显。<template><div><div><labelfor="">姓名</label><inputv-model="info.name"type="text"></div><div>......
  • 光脚丫思考Vue3与实战:第03章 Vue实例
    下面是本文的屏幕录像的在线视频:03-Vue实例04-生命周期示意图+钩子函数温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:03-Vue实例:https://pan.baidu.com/s/1O9lUFm2jRIlBeFrBjXPZIA 提取码:nbzt03-生命周期示意图+钩子函数:https://pan.baidu.com/s/1D4ndTSgPBNGE8D4_......
  • 光脚丫思考Vue3与实战:第02章 安装Vue.js
    下面是本文的屏幕录像的在线视频:02-安装Vue.js温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZfrCx7e5kQ 提取码:hws62、示例代码:https://pan.baidu.com/s/1oYV0Lej_E3ufyEUMxq1S2Q 提取码:ikhe 下图是文章大纲: 一、概述Vue.js......
  • 03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)
    一、文章大纲二、安装环境本文基于如下的环境进行试验的:Windows10中文64位专业版。v12.18.3版本的Node.js。@vue/cli4.5.4的Vue.js和cli。三、安装vue-cli使用npm全局安装vue-cli:npminstall-g@vue/cli可以使用如下的创建项目的命令,查看vuecli的安装情况:按照上面的提示,先卸载......
  • Spring 配置事务管理器方法的理解
    @BeanpublicPlatformTransactionManagertransactionManager(DataSourcedataSource){DataSourceTransactionManagertransactionManager=newDataSourceTransactionManager();transactionManager.setDataSource(dataSource);return......
  • 前端Vue自定义注册界面模版 手机号邮箱账号输入框 验证码输入框  包含手机号邮箱账号
    前端Vue自定义注册界面模版手机号邮箱账号输入框验证码输入框 包含手机号邮箱账号验证,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13306效果图如下:......
  • 前端Vue基于腾讯地图Api实现的选择位置组件 返回地址名称详细地址经纬度信息
    前端Vue基于腾讯地图Api实现的选择位置组件返回地址名称详细地址经纬度信息, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13310效果图如下:使用方法<!--leftTitle:左边标题name:输入框名字value:输入框选择值 placeholder:占位符@clic......
  • 线性代数理解回顾(二)
    矩阵乘法与线性变换复合内容来源:【熟肉】线性代数的本质-04-矩阵乘法与线性变换复合_哔哩哔哩_bilibili 很多时候你想描述这样一种作用:一个变换之后再进行另外一个变换,比如说先将整个平面逆时针90度后,再进行一次剪切会发生什么,  从头到位的总体作用是另一个线性变换。......