Vue第三天---Vue 基本特性_vue遍历data属性-CSDN博客

本文链接：https://blog.csdn.net/shelgi/article/details/121148781

文章目录

Vue 基本特性

Vue 基本特性

1. 实例及选项

Vue是通过new Vue({})来声明一个实例的，在这个实例中包含了当前页面的html结构，数据和事件。Vue的实例是MVVM
模式中的ViewModel，实现了数据和视图的双向绑定；在实例化的时候可以传入一个选项对象，它包含数据、模板、
挂载元素、方法、生命周期钩子函数等选项

1.1 数据

data：在Vue实例中初始化的data中的所有数据会自动进行监听绑定，然后可以在View中使用{{}}来绑定data中的数据

data中的数据都是浅拷贝，对原来对象的修改也会改变data，从而触发更新事件

在组件的使用过程中也可以使用data

组件中data的值必须是一个函数，并且返回值是原始对象；如果传给组件的data是一个原始对象，则在建立多个组件实例时，它们会共用这个data对象，修改其中一个组件实例的数据也会影响到其他组件实例的数据
data中的属性和props中的不能重名

1.2 方法

methods：通过methods对象定义方法，并使用v-on指令来监听DOM事件

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

1.3 模板

选项中主要影响模板或DOM的有el和template，属性replace和template需要一起使用

（1）el(类型为字符串、DOM元素或函数)：为实例提供挂载函数，通过css选择器来选择绑定的元素

（2）template（类型为字符串）：默认会将其指替换挂载元素，并合并挂载元素和模板根节点的属性

1.4 watch函数

Vue提供一种通用的方式来观察和响应Vue实例上的数据变动，那就是watch属性；

watch属性是一个对象，它有两个属性：一个是键，另一个是值。键是需要观察的表达式，值是对应的回调函数，回调函数得到的参数为新指和旧值。值也可以是方法名，或者包含选项的对象。Vue实例会在实例化的时候调用$watch()，遍历watch对象的每一个属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch函数 demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>

</head>
<body>
<div id="app">
    <button @click="a--">点击使 a-1</button>
    <p>{{message}}</p>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            a:3,
            message:""
        },
        watch:{
            a:function (val,oldval){
                this.message='旧值为:'+oldval+',新值为:'+val;
            }
        }
    })
</script>

</body>
</html>

2. 模板渲染

DOM所有的逻辑应尽可能在状态的层面去进行，当状态改变时，View应该是在框架的帮助下自动更新到合理状态，而不是开发者观测到数据变化后手动选择元素去进行更新。

2.1 条件渲染

条件渲染分为v-if和v-show两种，区别在之前已经说过了，下面来看看具体的实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <template v-if="yes">
        <h2>Vue</h2>
        <p>v-if demo</p>
    </template>

    <button @click="yes=!yes">点击使上面内容消失(展示)</button>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            yes:true
        }
    })
</script>
</body>
</html>

v-show使用起来大致一样，可以看看昨天的例子

2.2 列表渲染

列表渲染：用v-for指令根据一组数据的选项列表进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in items">{{item.text}}</li>
    </ul>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {text:"name"},
                {text:"age"},
                {text:"sex"}
            ]
        }
    })
</script>

</body>
</html>

渲染之后就是

标签
当v-for与v-if一起使用时，v-for比v-if有更高的优先级，所以v-if分别重复运用在每一次循环中。

2.3 前后端渲染对比

以前学java web开发，当时还是学jsp等等，通过模板引擎将数据加载到html页面进行渲染，而现在大部分都是前后端分离，那各自有什么优点呢？

前端渲染优点：
- 业务分离：后端只需要提供接口，前端开发不需要部署后端环境，只需要通过接口获取后端传来的数据
- 计算量转移：原本后端渲染的任务转移给了前端，服务器压力减小
总结来说，前端渲染最大的优点就是前后端的业务分离，前端工程师可以专心在前端业务逻辑中，提高了项目开发效率，毕竟现在项目尽快开发上线才是最关键的。

后端渲染优点：
- 对浏览器要求少，不会有那么多限制（例如js限制）
- 考虑seo，对搜索引擎友好
- 静态资源多，所以首页加载很快，后端渲染加载完成就直接显示HTML页面了，少去了前端渲染时js渲染的时间
3. extend的用法

extend：局部注册时应用。extend创建的是一个组件构造器，而不是一个具体的组件实例，所以需要通过Vue.components()注册才能使用。因为这涉及到组件的内容，所以放在后面一起。

补充

Vue响应式原理

当创建一个Vue实例时，Vue会遍历data选项的属性，用Object.definePropery将它们转为getter/setter,并且在内部追踪相关依赖，在属性被访问或修改时通知变化。每个组件实例都有相应的watcher实例，它会在组件渲染的过程中把属性记录为依赖，然后当依赖项的setter被调用时，会通知watcher重新计算，从而使得相关联的组件得以更新。